N008 标准总结：Selectors Level 3


最近通读了部分W3C标准，然后觉得有必要做一些总结，以便自己查阅和他人参考。本文是关于选择器的总结，基本与标准保持一致，部分措辞和顺序有所调整。另外，为方便阅读和使用，本文与标准有以下额外的不同之处：

  • 本文未对命名空间进行阐述，详细内容请参阅标准。
  • 本文将伪类单独列出，在标准中它是基本选择器的一部分。
  • 标准中有两处留白，分别是:contains()伪类和::selection伪元素。本文未列出已被废弃的前者，保留了即将划归为标准的后者。

以下按照基本选择器、组合选择器、伪类和伪元素的顺序分别列出选择器的语法与解释。文章的末尾部分对其他一些重要内容作了补充。

基本选择器

语法 解释
* 任意的元素
E E类型的元素
#val id属性为val
.val class属性为val
[att] 具有att属性
[att="val"] att属性的值为val
[att~="val"] att属性的值是一列由空格隔开的值，其中一个为val
[att|="var"] att属性的值是val，或者以val开头后接连字符"-"
[att^="val"] （子串匹配）att属性的值以前缀val开头
[att$="val"] （子串匹配）att属性的值以后缀val结尾
[att*="val"] （子串匹配）att属性的值至少包含一个val子串

组合选择器

语法 解释
E F F是E的后代
E<F F是E的孩子
E+F F是E的相邻兄弟
E~F F是E的通用兄弟

伪类

语法 解释
:link （链接状态）未访问的链接
:visited （链接状态）已访问的链接
:hover （用户行为）鼠标悬停其上
:active （用户行为）鼠标已经按下但尚未释放
:focus （用户行为）因鼠标或键盘获得了焦点
:enabled （元素状态）被启用的表单元素
:disabled （元素状态）被禁用的表单元素
:checked （元素状态）被选中的表单元素
:indeterminate （元素状态）既不是被选中，也不是未被选中的表单元素
:target 正在被激活的链接所指向的锚
:lang(val) lang属性的值为val，或者以val开头后接连字符"-"，进行语言匹配
:root 文档根元素，即HTML元素
:nth-child() 这样的元素：它是其父元素的某子元素，参数为even/odd，或者an+b，其中n≥0，an+b＞0
:nth-last-child() 倒序，参数同上
:nth-of-type() 这样的元素：它是其父元素的某类型子元素，参数为even/odd，或者an+b，其中n≥0，an+b＞0
:nth-last-of-type() 倒序，参数同上
:first-child 这样的元素：它是其父元素的第一个子元素
:last-child 这样的元素：它是其父元素的最后一个子元素
:first-of-type 这样的元素：它是其父元素的第一个某类型子元素
:last-of-type 这样的元素：它是其父元素的最后一个某类型子元素
:only-child 这样的元素：它是其父元素唯一的子元素
:only-of-type 这样的元素：它是其父元素唯一的某类型子元素
:not(selector) 排除某个简单选择器匹配后剩下的元素
:empty 既没有子元素，也没有文本节点的元素

伪元素

语法 解释
::first-line 元素的（格式化的）首行
::first-letter 元素的（格式化的）首字母
::before 在元素的内容前生成内容
::after 在元素的内容后生成内容
::selection 当前被选中的元素

选择器的组（Group）

组是一个很好理解的概念：当多个选择器所对应的样式规则声明相同时，通过逗号将它们隔开，即可共享同一个样式规则。比如：

h1 {
    color: green;
}
h2 {
    color: green;
}

上述规则就等价于：

h1, h2 {
    color: green;
}

通过组的使用，不仅可以简化代码书写，还可以增强CSS语句的可读性。

选择器的优先级（Specificity）

当多个规则匹配同一个元素时，浏览器将选择最高优先级的选择器所对应的样式规则来进行渲染。对于简单的选择器，其描述越"具体"则优先级越高；对于复杂的选择器，其优先级的计算方法如下：

  • ID选择器的个数之和为a
  • 类/伪类、属性选择器的个数之和为b
  • 元素/伪元素的个数之和为c

将a-b-c串联，所得的abc的值就是这个复杂选择器的优先级，值越大则表明优先级越高。另外，通用选择器和否定伪类不计其数目，但否定伪类的参数选择器需要计数。

其他特性

除了上述重要的内容，选择器还有一些复杂强大的使用方法和规则细节。比如多个选择器进行组合匹配、伪类的级联叠加、伪元素的具体实现方式等等，此文不再赘述。

参考文章

  1. W3C Standards， Selectors Level 3
  2. MDN， CSS参考

评论