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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: ':checked'
slug: 'Web/CSS/:checked'
translation_of: 'Web/CSS/:checked'
---
<div>{{CSSRef}}</div>
<p><strong><code>:checked</code></strong> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>选择器表示任何处于选中状态的<strong>radio</strong>(<code><input type="radio"></code>), <strong>checkbox </strong>(<code><input type="checkbox"></code>) 或("select") 元素中的<strong>option </strong>HTML元素("option")。</p>
<pre class="brush: css">/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
:checked {
margin-left: 25px;
border: 1px solid blue;
} </pre>
<p>用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。</p>
<div class="note">
<p><strong>Note:</strong>因为浏览器经常将<code><option></code>视为<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>,因此不同的浏览器通过<code>:checked</code>伪类渲染出来的效果也不尽相同.</p>
</div>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="基础示例">基础示例</h3>
<h3 id="Basic_example" class="hidden">Basic example</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no">
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Check me!</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">Apples</option>
<option value="opt2">Grapes</option>
<option value="opt3">Pears</option>
</select>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div,
select {
margin: 8px;
}
/* Labels for checked inputs */
input:checked + label {
color: red;
}
/* Radio element, when checked */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* Option elements, when selected */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Basic_example")}}</p>
<h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的checkbox来切换元素的样式（显示/隐藏）</h3>
<h3 id="Toggling_elements_with_a_hidden_checkbox" class="hidden">Toggling elements with a hidden checkbox</h3>
<p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><input type="checkbox" id="expand-toggle" />
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
</tbody>
</table>
<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">/* Hide the toggle checkbox */
#expand-toggle {
display: none;
}
/* Hide expandable content by default */
.expandable {
visibility: collapse;
background: #ddd;
}
/* Style the button */
#expand-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: #ff7;
border: 1px solid;
border-radius: 3px;
}
/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
visibility: visible;
}
/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
background-color: #ccc;
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values"><strong>图片相册</strong></h3>
<p>同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个<strong>只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，</strong>查看<a href="https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">演示</a>。</p>
<div class="note"><strong>注:</strong> 一个类似的效果，基于<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a>伪类和没有隐藏的radioboxes，查看<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">这个演示</a>，来自<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>页面。</div>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规格</th>
<th scope="col"> 级别</th>
<th scope="col">附注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Defines the semantic regarding HTML.</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 Basic UI') }}</td>
<td>Link to Selectors Level 3.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Defines the pseudo-class, but not the associated semantic</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.selectors.checked")}}</p>
|
