css3 选择器

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。

CSS选择器主要分为三类，第一类是基础选择器，这又包括通配选择器、标签选择器、ID选择器、CLASS选择器、属性选择器以及组合选择器；第二类是伪类选择器；最后一类是伪元素选择器。

当有多个不同的CSS选择器需要应用相同的样式，这个时候就可以使用选择器列表将样式应用到所有的单个选择器上。

下面来分别介绍一下各类选择器以及选择器列表：

基础选择器

1、通配选择器

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

<p class="warning">
  <span lang="en-us">A green spanspan> in a red paragraph.
p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red spanspan> in a green paragraph.
p>
1
2
3
4
5
6

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}
1
2
3

2、标签选择器

CSS 元素选择器 (也称为标签选择器) 通过 node 节点名称匹配元素。因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。

<span id="identified">Here's a span with some text.span>
<span>Here's another.span>
1
2

span#identified {
  background-color: DodgerBlue;
}
1
2
3

3、ID选择器

在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

<span id="identified">Here's a span with some text.span>
<span>Here's another.span>
1
2

span#identified {
  background-color: DodgerBlue;
}
1
2
3

4、CLASS选择器

在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

<span class="classy">Here's a span with some text.span>
<span>Here's another.span>
1
2

span.classy {
  background-color: DodgerBlue;
}
1
2
3

5、属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。属性的选择可以使用正则表达式来匹配。

<ul>
  <li><a href="#internal">Internal linka>li>
  <li><a href="http://example.com">Example linka>li>
  <li><a href="#InSensitive">Insensitive internal linka>li>
  <li><a href="http://example.org">Example org linka>li>
ul>
1
2
3
4
5
6

a {
  color: blue;
}
/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}
/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}
/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}
/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}
/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6、组合选择器

组合选择器包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器。通过间隔符将基础选择器连接起来，实现组合选择的效果。

li li {
  list-style-type: circle;
}
1
2
3

div > span {
  background-color: DodgerBlue;
}
1
2
3

img + p {
  font-weight: bold;
}
1
2
3

p ~ span {
  color: red;
}
1
2
3

伪类选择器

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。常用的伪类如下表所示：

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}
/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
/* p标签的一组兄弟元素中的第一个元素*/
p:first-child {
  color: lime;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

伪元素选择器

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。

伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。为了便于区分伪类选与伪元素，使用双冒号::作为伪元素选择符。

/* 每一个 
 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}
/* 将li元素内容前的符号设置为星号 */
ul li::marker {
  content: '★';
}
1
2
3
4
5
6
7
8
9

选择器列表

如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个选择器列表，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。

h1 {
  color: blue;
}
.special {
  color: blue;
}
1
2
3
4
5
6

将它们组合起来，在它们之间加上一个逗号，变为选择器列表。

h1, .special {
  color: blue;
}
1
2
3

另外，还有一点需要补充说明的是，选择器也是有优先级的。当通过不同的选择器来定位到某一标签时，该标签会应用优先级高的选择器的样式。

CSS的优先级为：内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器 、伪元素选择器。优先级相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性；优先级不同时，优先级高的选择器生效。通配符选择器*和关系选择符+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、空格（后代选择符）等对优先级没有影响。

在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级。

比如，有如下一个选择器：

#header .nav li { list-style: none; }
1

那么该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111。当有多个选择器时，权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性；权重不同时，权重大的选择器生效。

CSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。