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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: 伪类
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- CSS 参考
- 进阶
- 选择器
translation_of: Web/CSS/Pseudo-classes
---
<div>{{CSSRef}}</div>
<p>CSS <strong><dfn>伪类</dfn></strong> 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，{{ cssxref(":hover") }} 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。</p>
<pre class="brush: css no-line-numbers">/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}
</pre>
<p>伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 {{ cssxref(":visited") }}），同样的，可以根据内容的状态（例如在一些表单元素上的 {{ cssxref(":checked") }}），或者鼠标的位置（例如 {{ cssxref(":hover") }} 让你知道是否鼠标在一个元素上悬浮）来应用样式。</p>
<div class="blockIndicator note">
<p><strong>注意：</strong> 与伪类相反，{{cssxref("pseudo-elements")}} 可被用于为一个元素的 <em>特定部分</em> 应用样式。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">selector:pseudo-class {
property: value;
}</pre>
<p>类似于普通的类，你可以在一个选择器中同时一起写多个伪类。</p>
<h2 id="标准伪类索引">标准伪类索引</h2>
<div class="index" id="索引">
<ul>
<li>{{CSSxRef(":active")}}</li>
<li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":checked")}}</li>
<li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":default")}}</li>
<li>{{CSSxRef(":defined")}}</li>
<li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":disabled")}}</li>
<li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":empty")}}</li>
<li>{{CSSxRef(":enabled")}}</li>
<li>{{CSSxRef(":first")}}</li>
<li>{{CSSxRef(":first-child")}}</li>
<li>{{CSSxRef(":first-of-type")}}</li>
<li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":focus")}}</li>
<li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":focus-within")}}</li>
<li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":host")}}</li>
<li>{{CSSxRef(":host()")}}</li>
<li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":hover")}}</li>
<li>{{CSSxRef(":indeterminate")}}</li>
<li>{{CSSxRef(":in-range")}}</li>
<li>{{CSSxRef(":invalid")}}</li>
<li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":lang", ":lang()")}}</li>
<li>{{CSSxRef(":last-child")}}</li>
<li>{{CSSxRef(":last-of-type")}}</li>
<li>{{CSSxRef(":left")}}</li>
<li>{{CSSxRef(":link")}}</li>
<li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":not", ":not()")}}</li>
<li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
<li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
<li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
<li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
<li>{{CSSxRef(":only-child")}}</li>
<li>{{CSSxRef(":only-of-type")}}</li>
<li>{{CSSxRef(":optional")}}</li>
<li>{{CSSxRef(":out-of-range")}}</li>
<li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":read-only")}}</li>
<li>{{CSSxRef(":read-write")}}</li>
<li>{{CSSxRef(":required")}}</li>
<li>{{CSSxRef(":right")}}</li>
<li>{{CSSxRef(":root")}}</li>
<li>{{CSSxRef(":scope")}}</li>
<li>{{CSSxRef(":target")}}</li>
<li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef(":valid")}}</li>
<li>{{CSSxRef(":visited")}}</li>
<li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>{{SpecName("Fullscreen")}}</td>
<td>{{Spec2("Fullscreen")}}</td>
<td>Defined <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Defines when particular selectors match HTML elements.</td>
</tr>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Defined <code>:any-link</code>, <code>:blank</code>, <code>:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-invalid</code>, <code>:nth-col()</code>, <code>:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code>.<br>
Changed <code>:empty</code> to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br>
No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Basic UI")}}</td>
<td>{{Spec2("CSS3 Basic UI")}}</td>
<td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br>
Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br>
No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h2 id="参见">参见</h2>
<ul>
<li>{{ cssxref("pseudo-elements") }}</li>
</ul>
|
