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)      表示行九、1九、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