1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: CSS Selectors
slug: Web/CSS/CSS_Selectors
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef}}</div>
<p><strong>選擇器</strong>可以定義某組 CSS 樣式要套用到哪些元素上。</p>
<h2 id="基本選擇器">基本選擇器</h2>
<dl>
<dt><a href="/zh-TW/docs/Web/CSS/Universal_selectors">通用選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors" rel="noopener"><font><font>Universal selector</font></font></a><font><font>）</font></font></dt>
<dd>用以選擇所有元素。（可選）可以將其限制為特定的名稱空間或所有名稱空間。<br>
<strong>語法:</strong> <code>* ns|* *|*</code><br>
<strong>範例:</strong> <code>*</code> 套用文檔中所有元素。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/Type_selectors">標籤選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors" rel="noopener"><font><font>Type selector</font></font></a><font><font>）</font></font></dt>
<dd>用以選擇所有符合指定標籤的元素。<br>
<strong>語法:</strong> <code><var>elementname</var></code><br>
<strong>範例:</strong> <code>input</code> 可選出任一 <a href="/zh-TW/docs/Web/HTML/Element/input"><input></a> 元素。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/Class_selectors">類別選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors" rel="noopener"><font><font>Class selector</font></font></a><font><font>）</font></font></dt>
<dd>用以選擇所有符合指定 <code>class</code> 屬性值的元素。<br>
<strong>語法:</strong> <code>.<var>classname</var></code><br>
<strong>範例:</strong> <code>.index</code> 可選出任一含有 <code>index</code> 的 class 屬性值之元素。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/ID_selectors">ID選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors" rel="noopener"><font><font>ID selector</font></font></a><font><font>）</font></font></dt>
<dd>用以選擇指定 <code>id</code> 屬性值的元素。（一個文件中，每個ID屬性都是唯一的。）<br>
<strong>語法:</strong> <code>#<var>idname</var></code><br>
<strong>範例:</strong> <code>#toc</code> 會比對含有 ID 是 toc 的元素(可以定義成 <code>id="toc"</code> 或其他類似的定義)。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/Attribute_selectors">屬性選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="noopener"><font><font>Attribute selector</font></font></a><font><font>）</font></font></dt>
<dd>用以選擇所有符合指定屬性的元素。<br>
<strong>語法:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
<strong>範例:</strong> <code>[autoplay]</code> 將會套用含有 <code>autoplay</code> 屬性的元素。(不論這個屬性的值是什麼)。</dd>
</dl>
<h2 id="分組選擇器">分組選擇器</h2>
<dl>
<dt>選擇器列表（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a>）</dt>
<dd><code>,</code> 用以將不同的選擇器組合起來的一種方法。<br>
<strong>語法:</strong> <code><var>A</var>, <var>B</var></code><br>
<strong>範例:</strong> <code>div, span</code> 將同時選擇 <code><a href="/zh-TW/docs/Web/HTML/Element/div"><div></a></code> 和 <code><a href="/zh-TW/docs/Web/HTML/Element/span"><span></a></code> 元素。</dd>
</dl>
<h2 id="組合選擇器">組合選擇器</h2>
<dl>
<dt></dt>
<dt><a href="/zh-TW/docs/Web/CSS/Descendant_combinator">後代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a>）</dt>
<dd><code> </code> (空格) 用以選擇某個元素後代的元素。<br>
<strong>語法:</strong> <code><var>A</var> <var>B</var></code><br>
<strong>範例:</strong> <code>div span</code> 套用所有 <code><a href="/zh-TW/docs/Web/HTML/Element/div"><div></a></code> 元素內部的所有 <code><a href="/en-US/docs/Web/HTML/Element/span"><span></a></code> 元素。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/Child_combinator">子代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">Child combinator</a>）</dt>
<dd><code>></code> 用以選擇某個元素後代的元素。<br>
<strong>語法:</strong> <code><var>A</var> > <var>B</var></code>（B元素不可在A元素的其他元素裡）<br>
<strong>範例:</strong> <code>ul > li</code> 套用所有 <code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code> 元素內部的 <code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code> 子元素。</dd>
<dt><a href="/zh-TW/docs/Web/CSS/General_sibling_combinator">一般兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a>）</dt>
<dd><code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br>
<strong>語法:</strong> <code><var>A</var> ~ <var>B</var></code><br>
<strong>範例:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd>
<dt><a href="/zh-TW/docs/Web/CSS/Adjacent_sibling_combinator">相鄰兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a>）</dt>
<dd><code>+</code> 選擇緊接在後的元素，並共享父元素。<br>
<strong>語法:</strong> <code><var>A</var> + <var>B</var></code><br>
<strong>範例:</strong> <code>h2 + p</code> 套用所有 緊接在 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements"><h2></a></code> 元素後的 <a href="/zh-TW/docs/Web/HTML/Element/p"><p></a> 元素，並擁有 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements"><h2></a></code> 的父元素。</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt>
<dd>The <code>||</code> combinator selects nodes which belong to a column.<br>
<strong>語法:</strong> <code><var>A</var> || <var>B</var></code><br>
<strong>範例:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd>
</dl>
<h2 id="偽選擇器">偽選擇器</h2>
<dl>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt>
<dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br>
<strong>範例:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt>
<dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br>
<strong>範例:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd>
</dl>
<h2 id="規範">規範</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Added the <code>||</code> 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.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "selector.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br>
Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>See the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
<h2 id="參見">參見</h2>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
</ul>
|
