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的值就是这个复杂选择器的优先级,值越大则表明优先级越高。另外,通用选择器和否定伪类不计其数目,但否定伪类的参数选择器需要计数。
其他特性
除了上述重要的内容,选择器还有一些复杂强大的使用方法和规则细节。比如多个选择器进行组合匹配、伪类的级联叠加、伪元素的具体实现方式等等,此文不再赘述。
参考文章
- W3C Standards, Selectors Level 3
- MDN, CSS参考