【W3C】 CSS3选择器

扔一些学习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组成的二进制数即为权重值  
  • 允许重复同一个选择器以提高权重

【W3C】 CSS3选择器

上一篇:jboss上的web service开发示例


下一篇:读jquery 权威指南[1]-选择器及DOM操作