正在翻譯中。

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

基本選擇器

標籤選擇器
用以選擇所有符合指定名稱的元素。
語法: elementname
範例: input 可選出任一 <input> 元素。
類別選擇器
用以選擇所有包括指定之 class 屬性值的元素。
語法: .classname
範例: .index 可選出任一含有 index 的 class 屬性值之元素。
ID 選擇器
這個基本的選擇器會選擇基於 id 屬性的節點。在文件裡,應該只可以將一個 ID 給一個元素。
語法: #idname
範例: #toc 會比對含有 ID 是 toc 的元素(可以定義成 id="toc" 或其他類似的定義)。
通用選擇器
This basic selector chooses all nodes. It also exists in a one-namespace only and in an all-namespace variant too.
語法: * ns|* *|*
範例: * will match all the elements of the document.
屬性選擇器
This basic selector chooses nodes based on the value of one of its attributes.
語法: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
範例: [autoplay] will match all the elements that have the autoplay attribute set (to any value).

Combinators

Adjacent sibling selectors
The '+' combinator selects nodes that immediately follow the former specified element.
Syntax: A + B
Example: ul + li will match any <li> that immediately follows a <ul>.
General sibling selectors
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p> element inside the same element.
Child selectors
The '>' combinator selects nodes that are direct children of the former specified element.
Syntax: A > B
Example: ul > li will match all <li> elements that are inside a <ul> element.
Descendant selectors
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax: A B
Example: div span will match any <span> element that is inside a <div> element.

Pseudo-elements

Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.

Pseudo-classes

Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.

規範

Specification Status Comment
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Initial definition

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

文件標籤與貢獻者

此頁面的貢獻者: weichengcing, BobChao, noih, jsgao0, jackblackevo
最近更新: weichengcing,