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参考

评论