CSS Selectors

選擇器可以定義某組 CSS 樣式要套用到哪些元素上。

基本選擇器

通用選擇器(Universal selector)

用以選擇所有元素。(可選)可以將其限制為特定的名稱空間或所有名稱空間。 語法: * ns|* *|* 範例: * 套用文檔中所有元素。

標籤選擇器(Type selector)

用以選擇所有符合指定標籤的元素。 語法: elementname 範例: input 可選出任一 <input> 元素。

類別選擇器(Class selector)

用以選擇所有符合指定 class 屬性值的元素。 語法: .classname 範例: .index 可選出任一含有 index 的 class 屬性值之元素。

ID 選擇器(ID selector)

用以選擇指定 id 屬性值的元素。(一個文件中,每個 ID 屬性都是唯一的。) 語法: #idname 範例: #toc 會比對含有 ID 是 toc 的元素(可以定義成 id="toc" 或其他類似的定義)。

屬性選擇器(Attribute selector)

用以選擇所有符合指定屬性的元素。 語法: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 範例: [autoplay] 將會套用含有 autoplay 屬性的元素。(不論這個屬性的值是什麼)。

分組選擇器

選擇器列表(Selector list)

, 用以將不同的選擇器組合起來的一種方法。 語法: A, B 範例: div, span 將同時選擇 <div> 和 <span> 元素。

組合選擇器

後代選擇器(Descendant combinator)

" " (空格) 用以選擇某個元素後代的元素。 語法: A B範例: div span 套用所有 <div> 元素內部的所有 <span> 元素。

子代選擇器(Child combinator)

> 用以選擇某個元素後代的元素。 語法: A > B(B 元素不可在 A 元素的其他元素裡) 範例: ul > li 套用所有 <li> 元素內部的 <ul> 子元素。

一般兄弟選擇器(General sibling combinator)

~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. 語法: A ~ B 範例: p ~ span will match all <span> elements that follow a <p>, immediately or not.

相鄰兄弟選擇器(Adjacent sibling combinator)

+ 選擇緊接在後的元素,並共享父元素。 語法: A + B 範例: h2 + p 套用所有 緊接在 <h2> 元素後的 <p> 元素,並擁有 <h2> 的父元素。

Column combinator 實驗性質

The || combinator selects nodes which belong to a column. 語法: A || B 範例: col || td will match all <td> elements that belong to the scope of the <col>.

偽選擇器

Pseudo classes

The : pseudo allow the selection of elements based on state information that is not contained in the document tree. 範例: a:visited will match all <a> elements that have been visited by the user.

Pseudo elements

The :: pseudo represent entities that are not included in HTML. 範例: p::first-line will match the first line of all <p> elements.

規範

See the pseudo-class and pseudo-element specification tables for details on those.

參見

• CSS Specificity