--- title: CSS Selectors slug: Web/CSS/CSS_Selectors translation_of: Web/CSS/CSS_Selectors ---
{{CSSRef}}

選擇器可以定義某組 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 {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.
相鄰兄弟選擇器（Adjacent sibling combinator）
+ 選擇緊接在後的元素，並共享父元素。
語法: A + B
範例: h2 + p 套用所有 緊接在 <h2> 元素後的 <p> 元素，並擁有 <h2> 的父元素。
Column combinator {{Experimental_Inline}}
The || combinator selects nodes which belong to a column.
語法: A || B
範例: col || td will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("p")}} elements.

規範

Specification Status Comment
{{SpecName("CSS4 Selectors")}} {{Spec2("CSS4 Selectors")}} 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.
{{SpecName("CSS3 Selectors")}} {{Spec2("CSS3 Selectors")}} Added the ~ general sibling combinator and tree-structural pseudo-classes.
Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}} {{Spec2("CSS2.1")}} Added the > child and + adjacent sibling combinators.
Added the universal and attribute selectors.
{{SpecName("CSS1")}} {{Spec2("CSS1")}} Initial definition.

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

參見