CSS 选择符

前端
CSS
作者

yangjh

发布日期

October 30, 2021

CSS 是一门用来描述 HTML、XML 文档在屏幕、纸张或者朗读设备等等上如何表现的语言，CSS 使用选择符（selector）将样式（style）属性和文档中的特定元素（element）进行绑定。随着相关技术的演进，CSS 中的选择符也越来越丰富，功能也越来越强大。

CSS 选择符对大小写不敏感。

简单选择符

简单选择符（Simple Selector）指的是选择符本身再无法分解，是构成组合选择符、群组选择符的选择符，这类选择符是 CSS 选择符的基础。

类型选择符

类型选择符（Type Selector），也叫做元素选择符，该选择符能代表文档树中的所有指定的元素。

h1 {color:red}

上述规则将使文档中所有的 h1 元素字体颜色为红色。

通配选择符

通配选择符（Universal Selector），将选定所有元素。通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，不建议使用。

* {color:red}

上述规则将使文档中所有元素的前景色为红色。

属性选择符

属性选择符（Attribute Selector）将选定那些拥有匹配属性的元素。具体如下表：

属性选择符 含义
E[foo] 选择具有“foo”属性的元素
E[foo="bar"] 选择具有“foo”属性并且属性值完全等于“bar”的元素
E[foo~="bar"] 选择具有“foo”属性，且值中其中一个等于“bar”的 E 元素（包含只有一个值且该值等于“bar”的情况）。
E[foo^="bar"] 选择具有“foo”属性，并且属性值以“bar”开头的元素
E[foo$="bar"] 选择具有“foo”属性，并且属性值以“bar”结尾的元素
E[foo*="bar"] 选择具有“foo”属性，并且属性值包含“bar”的元素
E[foo | ="en"] 选择具有“foo”属性，属性值并且以“en”开头并用连接符”-“分隔的字符串的 E 元素

类选择符

类选择符（Class Selector）将选择那些 class 属性值为指定值的元素。

.bar        /*将选择所有具有 class="bar"属性及值的元素*/
h1.bar      /*将选择具有 class="bar"的所有 h1 元素*/
.bar.foo    /*将选择 class 值中同时包含 bar、foo 的元素，注意中间没有空格*/

带有元素名称的类选择符和使用 class 属性的属性选择符是等价的。如 div.value 就等同于 div[class~=value]。

ID 选择符

ID 选择符（ID Selector）将选择 ID 属性等于指定值的元素。按照 W3C 标准，ID 属性在 DOM 中的值应该是唯一的。

#bar        /*将选择所有具有 id="bar"属性值的元素*/
h1#bar      /*将选择具有 id="bar"的 h1 元素*/

伪类选择符

伪类（pseudo-class）的概念是指那些不在文档树中或者不能使用其他简单选择符选择的内容。伪类以“：”开头，后面跟随伪类名称。根据类别不同，伪类选择符又分为：链接伪类选择符、用户行为伪类选择符、目标伪类选择符、语言伪类选择符、UI 元素伪类选择符、结构伪类选择符、否定伪类选择符等。由于伪类选择符内容较多，虽然其从概念上将还是简单选择符，我们单独阐述。

链接伪类选择符

浏览器通常会将未访问的超级链接和访问过的超级链接加以区分，CSS 提供了：link 和：visited 链接伪类选择符用以区别它们。

  1. :link :link 伪类将应用于那些没有被访问过的内容。
  2. :visited :visited 伪类将应用于那些已经被访问过的内容。

用户行为伪类选择符

浏览器通常会在用户交互时用不同形式来表现交互状态。CSS 使用以下三个伪类用以和用户交互：

  1. :hover 该伪类选择符表示用户将鼠标（或其他交互设备）移动到元素之上时的状态。
  2. :active 该伪类表示用户激活（如点击）元素时的状态。
  3. :focus 该伪类表示获得焦点（如键盘输入、鼠标点击）时的状态。

目标伪类选择符

有时 URI 只需资源内部的某个部分，这种类型的 URI 的尾部含有数字标记“#”, 在“#”之后是锚点识别符（也叫片段识别符）。例如下例中的 section2：

http://example.com/html/top.html#section2

使用:target伪类选择符，就可以对资源内部中片段识别符（如上例中 section2）对应的元素设置样式。

语言伪类选择符

语言伪类选择符能对特定 lang 属性的元素设置样式。如：

html:lang(zh) /*选中 lang 属性值为 zh 的 html 元素*/

UI 元素伪类选择符

UI 元素伪类选择符可以针对 UI 元素的状态进行选择。

  1. :enabled 选择 UI 元素中处于 enabled 状态的元素。
  2. :disabled 选择 UI 元素中处于 disabled 状态的元素。
  3. :checked 使用：checked 伪类选择符，可以选择被用户切换到选中状态 radio、checkbox 等元素。

结构伪类选择符

结构伪类选择符基于文档树中元素的父子兄弟关系进行选择。

  1. :root 表示文档的根元素，在 HTML4 中，该选择符将始终选择 html 元素。

  2. :nth-child() 代表同一父级元素的第 N 个元素。如：

    tr:nth-child(2n+1) /* 表示表格中的奇数行 */
tr:nth-child(odd)  /* 同上 */
tr:nth-child(2n+0) /* 表示表格中的偶数行 */
tr:nth-child(even) /* 同上 */
tr:nth-child(5)      /* 表示表格中的第 5 行 */

  3. :nth-last-child() 表示在同一父元素中，从后往前计算的第 N 个元素。

  4. :nth-of-type() 表示同类型兄弟元素中的第 N 个元素。

  5. :nth-last-of-type() 表示同类型兄弟元素中，从后往前计算的第 N 个元素。

  6. :first-child 表示同一个父元素中的第一个子元素。

  7. :last-child 表示同一个父元素中的最后一个子元素。

  8. :first-of-type 表示同类型兄弟元素中的第一个元素。

  9. :last-of-type 表示同类型兄弟元素中的最后一个元素。

  10. :only-child 匹配父元素仅有的一个子元素。

  11. :only-of-type 匹配同类型中的唯一的一个同级兄弟元素。

  12. :empty 匹配没有任何子元素（包括 text 节点）的元素。

否定伪类选择符

否定伪类选择符:not(X)，将匹配不含有 X 选择符的元素。例如：

.demo li:not(:last-child) { border-bottom: 1px solid #ddd; }

上述规则将匹配给定列表项（除最后一项之外），使其有一条红色的下划线。

伪元素选择符

伪元素能创造出 HTML 语言无法创造的抽象元素，如段落首行、首字母、元素前、元素后等等。伪元素选择符以“::”开始。

用以区别伪类选择符，但以前的写法仍然有效。后面跟元素元素名称。

  1. ::first-line 设置元素内的第一行的样式。此伪元素仅作用于块元素。
  2. ::first-letter 设置对象内的第一个字符的样式。此伪对象仅作用于块对象。
  3. ::before 设置在对象前（依据对象树的逻辑结构）发生的内容。和 content 属性一起使用，并且必须定义 content 属性。
  4. ::after 设置在对象后（依据对象树的逻辑结构）发生的内容。和 content 属性一起使用，并且必须定义 content 属性。
  5. ::placeholder 设置对象文字占位符的样式。
  6. ::selection 设置对象被选择时的颜色。

组合选择符

组合选择符能根据文档树中选择符所代表的父子兄弟关系进行更加准确的选择，其在实际工作中使用率很高。

后代选择符

两个简单选择符之间用空格组合在一起，就表示后代选择符，如：

h1 em

表示选择位于 h1 元素中的 em 元素。

子元素选择符

子元素选择符使用“>”将两个简单选择符组合在一起，选择具有父子关系的子元素。不同于后代选择符，子元素选择符只能命中子元素，而不能命中孙辈。例如：

.demo > div

表示选择 class 为 demo 的元素中的 div 子元素。

相邻选择符

两个元素用“+”连接在一起，如E+F，表示选择出现在 E 元素之后的 F 元素。

兄弟选择符

两个元素用“~”连接在一起，如 E~F，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

群组选择符

在 CSS 中，使用“,”将选择符连接在一起，表示这些选择符共享相同的样式声明。例如：

h1,h2,h3 {color : red;}

上述例子表示，h1、h2、h3 元素的颜色都为红色。群组选择符，能降低 CSS 样式书写时的重复规则，提高开发效率。

参考资料

  1. https://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#q5.0
  2. http://css.doyoe.com/
  3. [CSS-selector-4 草稿][https://drafts.csswg.org/selectors-4/](https://drafts.csswg.org/selectors-4/)
回到顶部