时间戳

首页 > 技术文章 > CSS选择器

CSS选择器

zzmiaow 2017-10-28 23:57 原文

　　CSS选择器的准确书写，保证了元素应用样式的正确性，CSS中选择器主要包括：

1、元素选择器：

　　最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
p {color:silver;}

 

2、类选择器：

　　类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

　　如有这样一段HTML代码：

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

　　如果只想选择所有类名相同的元素，可以在类选择器中忽略元素选择器：

.important {color:red;}
或者
*.important {color:red;}

　　只想选中p时，类选择器可以结合元素选择器来使用，选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。：

p.important {color:red;}

 

　　通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

.important.urgent {background:silver;}

　　这段代码在以下元素中不能显示：

<p class="important warning">
This paragraph is a very important warning.
</p>

　　但是在下面的元素中就能实现：

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

 

3、id选择器

　　在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

　　类选择器可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。

　　与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

　　不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

　　类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

4、后代、子级、同级选择器

　　在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

　　派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

　　派生选择器包括选择被包含元素的后代选择器，选择子级的子级选择器，选择相邻的后面兄弟元素的相邻同级选择器，选择后面兄弟元素的同级选择器。

　　比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个后代选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

　　这样会选择到li里面所有的strong元素。

　　如HTML代码所示：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

 

　　当li里面存在strong和p，p里面又有strong元素，这时想要选择li的strong而不选中p里面的strong时，可以写作：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li>
　　<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
　　<p>我是普通文字样式<strong>我是粗体但不是斜体，我不是li的子级元素</strong></P>
</li>
<li>我是正常的字体。</li>
</ol>

 

　　此时的css代码应当写作：

li>strong {
    font-style: italic;
    font-weight: normal;
  }

 

　　当希望实现选中标题下面的第一个段落设置为粗体，而不会选中后面的段落时，可以使用选择相邻的同级选择器：

<h1>我是标题，没有设置任何样式</h1>
<p>我是h1相邻的兄弟元素，我是粗体</P>
<p>我不是相邻的兄弟元素，我不是粗体</p>

 

　　对应的css代码应当写作：

h1+p{
     font-weight: bold;          
 }

 

　　当h1后面还跟有其余的元素，如div时，h1后面只能跟div，再写p时无法选中段落，因为此时h1和p已经不是相邻关系。如果想要选中后面的其余兄弟元素，应当使用：

h1~p{
  font-weight: bold;  
}

 

　　样式将会设置到每一个前面有h1兄弟元素的p上面。

5、属性选择器

　　可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

　　下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

　　当想要指定属性为某一属性值时，如为 title="hello" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

 

　　当属性的值为多个值时，下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

 

　　带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

　　当属性值以某段字符开始时，选中这些元素设置样式：

[title^=hello] { color:red; }

 

　　当属性值包含某段字符时，选中这些元素设置样式：

[title*=hello] { color:red; }

 

　　当属性值以某段字符结束时，选中这些元素设置样式：

[title$=hello] { color:red; }

　　属性选择器可以配合基本选择器使用，这样只会选中对应属性的这一种标签。另外，属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

 

6、伪类选择器和伪元素选择器

　　常见的伪类选择器：

　　:link　　

　　:hover

　　:active

　　:visited

　　:lang

　　结构性的伪类选择器包括有

　　:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。

　　:not()选择器称为否定选择器，可以选择除某个元素之外的所有元素。

　　:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

　　:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

　　:nth-child()  /  :nth-of type选择某个元素的一个或多个特定的子元素。（选择元素中的第一个子元素，:first-child() ，同样可以适用于倒数在中间加上last即可，以及only-child指定唯一子元素）

　　伪元素选择器包括（本身为两个冒号，现在习惯写作一个冒号）：

　　:first-line  /  :first-letter选择器选择元素的第一行  /  第一个字母，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

　　:before和:after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，也可以用来绘制三角形或者对话框，清除浮动将after设置为块级元素，在进行clear

　　::selection选择被用户选取的元素部分。

7、选择器总览

 　　 查看更多选择器戳这里

推荐阅读