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
, 用以將不同的選擇器組合起來的一種方法。
語法: AB
範例: 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.

規範

Specification Status Comment
Selectors Level 4 Working Draft Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3 Recommendation Added the ~ general sibling combinator and tree-structural pseudo-classes.
Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
CSS Level 2 (Revision 1) Recommendation Added the > child and + adjacent sibling combinators.
Added the universal and attribute selectors.
CSS Level 1 Recommendation Initial definition.

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

參見