CSS 选择器

本文内容所涉及的 CSS 选择器包含 CSS3 新增选择器部分，不作额外区分，部分选择器效果详见「CSS 选择器示例」。

• 简单选择器：通过元素类型、class 或 id 匹配一个或多个元素 + 通配符*

• 属性选择器：通过属性或属性值匹配一个或多个元素

• 伪类：匹配处于确定状态的一个或多个元素

• 伪元素：匹配处于相关的确定位置的一个或多个元素

• 组合器：以有效的方式组合两个或更多的选择器用于非常特定的选择

1. 简单选择器

标签选择器、ID 选择器、class 选择器等

p {
  color: red;
}
.first {
  font-weight: bold;
}
#polite {
  font-family: cursive;
}
* {
  padding: 5px;
}

2. 属性选择器

存在和值（Presence and value）属性选择器：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何

• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素

• [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个

= 表示 val 严格等于，～= 表示 val 值包含即可

子串值（Substring value）属性选择器（类似正则表达）

• [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素

• [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素

• [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素

• [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素

/* 给date-pref属性包含same的li标签添加背景颜色 */
li[data-perf*="same"] {
   background-color: rgba(0,0,255,0.5);
}

3. 伪类

伪类不是选择元素，而是仅在某些特定上下文中存在的元素。

伪类 pseudo-class 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

• :link 超链接点击之前

• :visited 链接被访问过之后

• :hover “悬停”，鼠标放到标签上的时候

• :active “激活”， 鼠标点击标签，但是不松手时

• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接的书写顺序：a:link 、a:visited 、a:hover 、a:active。

记忆小TIP：“爱恨准则”：love hate，先爱后恨。

• E:first-child 匹配父元素的第一个子元素E。

• E:last-child 匹配父元素的最后一个子元素E。

• E:nth-child(n) 匹配父元素的第n个子元素E。

• E:nth-child(odd) 匹配奇数

• E:nth-child(even) 匹配偶数

• E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

注意，E:nth-child()中元素的编号是从1开始算起，不是从0开始算起，但2n/-n+5这些的n指代了0。

• 如果选择器写成li:nth-child(2)，则表示第2个li

• 如果选择器写成li:nth-child(n)，则表示所有的li

• 如果选择器写成li:nth-child(2n)，则表示所有的第偶数个li

• 如果选择器写成li:nth-child(2n+1)，则表示所有的第奇数个li

• 如果选择器写成li:nth-child(-n+5)，则表示前5个li

• 如果选择器写成li:nth-last-child(-n+5)，则表示最后5个li

• 如果选择器写成li:nth-child(7n)，则表示选中7的倍数

• E:first-of-type 匹配同类型中的第一个同级兄弟元素E

• E:last-of-type 匹配同类型中的最后一个同级兄弟元素E

• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

• E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

• E:empty 匹配没有任何子节点（包括空格等text节点）的元素E

• E:target 匹配相关URL指向的E元素。要配合锚点使用

区别:nth-child()与:nth-of-type()，其中:nth-of-type()的计数是同类型的元素，而:nth-child()计数不需要看元素类型。

完整 CSS 伪类详见 W3school - CSS 选择器参考手册

4. 伪元素

伪元素不是选择元素，而是元素的某些部分。

伪元素（Pseudo-element）前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。

• E::before 设置在 元素E 前面（依据对象树结构）的内容，常配合 content 属性使用

• E::after 设置在 元素E 后面（依据对象树结构）的内容，常配合content属性使用

• E::first-letter 设置元素 E 里面的第一个字符的样式

• E::first-line 设置元素 E 里面的第一行的样式

• E::selection 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）

5. 组合器

/* 所有table里的tfoot里的th */
table tfoot th {}
/* 在table当中，所有的th之后的td */
table th + td {}
/* 所有table里的tbody里的所有td（第一个除外），每个td都是由它上边的td选择 */
table tbody td + td {}

如果你对内容有任何疑问，欢迎提交 ❕issues 或 ✉️ email