CSS参考手册
选择 | Selectors
:checked
:checked伪类选择器表示任何在单选按钮（<input type="radio">），复选框（<input type="checkbox">）或选项（一个<select>中的<option>）中被选择或切换到on状态的元素。用户可以通过单击该元素来或者选择一个不同的值来改变这个状态，在这种情况下:checked伪类不再适用于这个元素，而是适用于相关的元素。
/* selects any checked/selected radio, checkbox, or option */
input:checked {
margin-left: 25px;
border: 1px solid blue;
}语法
:checked实例
示例选择器
/* any "checkable" element */
:checked {
width: 50px;
height: 50px;
}
/* only radio elements */
input[type="radio"]:checked {
margin-left: 25px;
}
/* only checkbox elements */
input[type="checkbox"]:checked {
display: none;
}
/* only option elements */
option:checked {
color: red;
}input[type="radio"]:checked代表页面上的所有被选择的单选按钮
input[type="checkbox"]:checked表示页面上的所有被选择的复选框
option:checked代表的页面上的所有被选择的选项
使用隐藏复选框来存储某些css布尔值
应用于页面开头的隐藏复选框的:checked伪类可以用来顺序存储一些CSS规则要使用的动态布尔值。以下示例显示了如何通过单击按钮来隐藏/显示某些可展开的元素（下载此演示）。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>
<style>
#expand-btn {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}
#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
background: #B5B5B5;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}
#isexpanded, .expandable {
display: none;
}
#isexpanded:checked ~ * tr.expandable {
display: table-row;
background: #cccccc;
}
#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
display: block;
background: #cccccc;
}
</style>
</head>
<body>
<input type="checkbox" id="isexpanded" />
<h1>Expandable elements</h1>
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><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><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
</tbody>
</table>
<p>[some sample text]</p>
<p><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>
<p class="expandable">[another sample text]</p>
<p>[some sample text]</p>
</body>
</html>使用隐藏的单选框来存储一些CSS布尔值
您还可以使用应用于隐藏单选框的:checked伪类，以便构建例如只有当鼠标点击预览时才显示全尺寸图像的图片库。见这个演示。
注：对于类似的效果，但是基于:hover伪类和无隐藏的单选框，请参阅这个演示。
规范
Specification |
Status |
Comment |
|---|---|---|
HTML Living StandardThe definition of ':checked' in that specification. |
Living Standard |
No change. |
HTML5The definition of ':checked' in that specification. |
Recommendation |
Defines the semantic regarding HTML. |
Selectors Level 4The definition of ':checked' in that specification. |
Working Draft |
No change. |
CSS Basic User Interface Module Level 3The definition of ':checked' in that specification. |
Candidate Recommendation |
Link to Selectors Level 3. |
Selectors Level 3The definition of ':checked' in that specification. |
Recommendation |
Defines the pseudo-class, but not the associated semantic |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
9.0 |
9.0 |
3.1 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
2.1 |
(Yes) |
1.0 (1.0) |
9.0 |
9.5 |
3.1 |
选择 | Selectors相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......