扔一些学习W3C时翻译的规范,以个人理解和总结为主,翻译为辅。
原文地址:http://www.w3.org/TR/css3-selectors/
一、基本概念
node和element:element是XML中的概念,是xml的数据组成部分。node是对于tree的结构而言的,元素由结点组成。
parent :父元素
children:子元素(直接后代,不包括再往后的后代 = 。 =)
slibings :兄弟元素
the subjects of a selector:一个选择器所匹配到的document
tree中的元素就是这个选择器的subjects
二、Simple Selectors 简单选择器
- Attribute
selectors 属性选择器
[attr] 具有attr属性
[attr=value]
属性值等于value
[attr~=value]
属性值是一系列用空格隔开的值,其中有一个值等于value
[attr|=value]
属性值等于value或者以value开头并紧跟‘-’字符
[attr^=value]
属性值以value开头
[attr$=value]
属性值包含value
[attr*=value]
属性值以value结束
- Pseudo-classes 伪类
定义:伪类是被引入用来允许选择DOM树外的信息,或不能用其他简单选择器表达的信息。
表现:单冒号加伪类名
说明:所有简单选择器序列都可以使用伪类。有些伪类是互斥的,而有一些可以同时应用。伪类可以是动态的,当用户发生交互时元素可以得到或失去一个伪类。
P.S. 通常来说,相对于简单选择器,在匹配相同的情况下,伪类具有更高的权重。
- 结构伪类
用于选择DOM树内的,但不能用其它简单选择器或选择符所表示的额外信息。
当计算一个element在它的parent的children list中的序号时,独立文本和非节点元素不在计算范围内。该序号从1开始。
:root
匹配文档的根元素,在HTML4中,恒为 HTML 元素
:nth-child()
eg:
tr:nth-child(2n+1) /* 匹配奇数行 */
tr:nth-child(10n-1) /* 第9、19、29……行 */
tr:nth-child(2) /* 第2行 */
:nth-of-type()
按slibings的元素名进行分组排序的序列
:nth-last-child()
:nth-last-type 倒序
:first-child ==
:nth-child(1)
:last-child ==
:nth-last-child(1)
:first-of-type ==
:nth-of-type(1):nth-last-type(1)
:last-of-type
:only-child ==
:first-child:last-child
:only-of-type ==
:first-of-type:last-of-type
:empty
匹配没有children的元素,任何有长度的节点都不行
- 否定伪类
用来排除不需要的元素
:not()
参数是一个简单选择器
- 状态伪类
用于交互
:link
适用于没有被访问的链接
:visited
已被访问过的链接
:hover
鼠标移上去~
:active
鼠标按下的时候~
:focus
获得焦点
:checked
用于单选框、复选框
:enabled
:disaled
用于表单的状态嘛~
:indeterminate
不确定性都出来了!薛定谔的猫的节奏么!牛逼!
- 目标伪类
匹配以URI中标识符为id的元素
- 语言伪类
如果文档语言规定了一个元素的自然语言是如何定义的,就可使用:lang(C)来匹配,可以让客户端根据文档的语言属性自动匹配
:lang(C)中的C是语言代码,不能为空
三、Combinators 关系选择器
- 后代选择器 A
B
- 子选择器 A
> B
- 兄弟选择器
A
+ B 只选择其后符合条件的一个兄弟元素
A
~ B 选择其后多个兄弟元素
四、Pseudo-elements 伪元素
定义:伪元素是在document
tree中无法用文档语言来定义的内容的抽象。比如一个元素的内容的第一行::first-line、第一个字母::first-letter,同时还允许用户访问在源文档中不存在的内容,比如::before,::after。
表现:双冒号加伪元素名
说明:一个选择器中只能出现一个伪元素,且它只能出现在表示这个选择器的subjects的简单选择器序列后面(在将来的版本中会允许使用多个伪元素)
五、权重的计算
- 计算ID选择器的数量 (= a)
- 计算类、属性、伪类选择器的数量 (= b)
- 计算类型选择器、伪元素的数量 (= c)
- 忽略通用选择器
- 否定伪类本身不被计算
- 三个数字相连a-b-c组成的二进制数即为权重值
- 允许重复同一个选择器以提高权重