CSS选择器

原地址：

http://www.w3.org/TR/css3-selectors/

测试演示地址：

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/reports/implementreportTEMPLATE.html

 

 

Abstract

Selector是在树状结构中进行匹配的模式，类似于XML文档中读取节点的技术。Selector对HTML和XML的处理得到了优后，被设计为使用效率关键的代码。

CSS是一种渲染HTML和XML的一种语言。

 

6 Simple selector

6.1 Type selector

6.1.1 Type selectors and namespaces

Type selector允许可选命名空间组件：事先声名的命名前缀，通过竖线分隔的元素名称的预先设定。

一个命名元素可能左边是空的（命名元素的前边没有前缀），表明这个Selector只代表元素而没有namespace.

ns|E          ns的namespace中的E元素

*|E            E元素，任何namespace，包括没有namespace

|E              没有namespace的E元素

E                若没有默认namespace，同 *|E，否则同 ns|E

 

6.2 Universal selector

6.3 Attribute selectors

[attr] 代表某元素包括该属性，无论该属性有什么值

         h1[title] 有title属性的h1标签

[attr=val]某元素的属性attr的值val

         span[class=”example”]， class属性为 example的span

[attr~=val] 代表某元素为空白符分隔的某一个值

         a[rel~="copyright"] { ... }， 可以匹配 rel=”copyright copyleft”的a元素

[attr|=val] 代表某元素attr属性的值为val 或以 val开始后接-( val-)

         a[hreflang!=”en”] 可匹配属性 en, en-US…

 

[attr^=val] 代表某元素attr属性的值以val开头

[attr$=val] 代表某元素attr属性以val结尾

         a[href$=”.html”] href属性以.html结尾的a标签

[attr*=val] 代表某元素attr属性的值所括 val

 

6.4 Class selectors

使用点来表示 Css中的Class

*.pastoral 或 .pastoral 查找 元素包括 class=”pastoral”

 

6.5 ID selectors

#chapter1 查询 ID为 chapter1的元素  id=”chapter1”

 

6.6 Pseudo-classes

:link 应用未访问过的链接

:visited应用已访问过的链接

:hover user hovers

:active 元素已被用户激活过(active links)

:focus

:target URI中的 #  锚点

 

:enabled

:disabled

:checked 单选或多选框 选中状态

 

:root

:nth-child()        an+b  a,b为整数

         tr:nth-child(2n+1) table的奇数行

         tr:nth-child(odd)       同上

         tr:nth-child(2n+0)    table的偶数行

         tr:nth-child(even)     同上

        

         :nth-child(10n-1)      表示行9、19、29…

         :nth-child(10n+9)     同上

         :nth-child(10n+-1)    语法错误，忽略

        

         foo:nth-child(0n+5)           第5个foo

         foo:nth-child(5)                  同上

:nth-last-child()         an+b

         tr:nth-last-child(-n+2)        表格的最后两行

         tr:nth-last-child(odd)          表格的奇数行，从后向开

:nth-of-type()            an+b

:nth-last-of-type()

         body>h2:nth-of-type(n+2):nth-last-of-type(n+2)     body中的h2,除去第一个和最后一个

         body>h2:not(:first-of-type):not(:last-of-type) 同上

:first-child

         div>p:first-child        div元素中的第一个元素并且是p元素

last-child

         ol>li:last-child  ol中的最后一个li

:first-of-type

:last-of-type

:only-child 该元素的父元素只有一个子元素

:only-of-type   

:empty

 

:not

         button:not([DISABLED])

 

7 Pseudo-elements

::first-line

         p::first-line p元素下的第一行

::first-letter

::before

::after

 

8 Combinators

8.1 Descendant combinator

A B   A标签下的B标签

         h1 em h1标签下的em标签

         div * p

         div p *[href]

8.2 Child combinators

A>B  child combinators

         body>p

         div ol>li p p标签需要li的子孙，li需为ol的孩子， ol需为div的子孙

8.3 Sibling combinators

A+B A临近的兄弟标签B

         math + p math标签后的p标签

A ~ B

         h1 ~ pre h1标签同一父标签下的pre标签

9 Calculating a selector’s specificity

10 The grammar of Selectors

10.1 Grammar

*       0或多

+      1或多

?       0或1

|       separates alternatives

[]       grouping

 

10.2 Lexical scanner

"~="             return INCLUDES;

"|="             return DASHMATCH;

"^="             return PREFIXMATCH;

"$="             return SUFFIXMATCH;

"*="             return SUBSTRINGMATCH;

{ident}          return IDENT;

{string}         return STRING;

{ident}"("       return FUNCTION;

{num}            return NUMBER;

"#"{name}        return HASH;

{w}"+"           return PLUS;

{w}">"           return GREATER;

{w}","           return COMMA;

{w}"~"           return TILDE;

":"{N}{O}{T}"("  return NOT;

@{ident}         return ATKEYWORD;

{invalid}        return INVALID;

{num}%           return PERCENTAGE;

{num}{ident}     return DIMENSION;

"<!--"           return CDO;

"-->"            return CDC;

 

11 Profiles