:checked伪类用于控制选中状态的表单元素样式，可实现复选框文本变色、自定义开关按钮及显示隐藏内容等交互效果，结合label和兄弟选择器能脱离JavaScript完成动态样式切换，兼容IE9+和现代浏览器。
在CSS中，:checked 是一个非常实用的伪类选择器，主要用于单选按钮（radio）、复选框（checkbox）以及下拉选项（option）等表单元素被选中时的样式控制。通过它，我们可以实现不依赖JavaScript的交互式视觉效果，比如改变选中项的颜色、显示隐藏内容或切换开关样式。
:checked 只在表单控件处于“选中”状态时生效。常见使用场景是配合 input[type="checkbox"] 或 input[type="radio"]。
示例：让选中的复选框旁边的文本变色：
<input type="checkbox" id="agree"> <label for="agree">我同意条款</label>
CSS代码：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label {
color: green;
}
说明：当复选框被勾选时，其后紧跟的 label 文字颜色变为绿色。
由于原生的 input 样式难以美化，通常会隐藏原始输入框，用 label 来模拟按钮或开关，并通过 :checked 控制样式变化。
示例：创建一个简单的开关按钮
<input type="checkbox" id="toggle" class="toggle-input"> <label for="toggle" class="toggle-label"></label>
.toggle-input {
display: none;
}
.toggle-label {
width: 60px; height: 30px;
background-color: #ccc;
border-radius: 15px;
position: relative;
cursor: pointer;
}
.toggle-label::after {
content: '';
position: absolute;
width: 26px; height: 26px;
background: white; border-radius: 50%;
top: 2px; left: 4px;
transition: left 0.3s;
}
.toggle-input:checked + .toggle-label {
background-color: #4CAF50;
}
.toggle-input:checked + .toggle-label::after {
left: 34px;
}
此时点击 label，会触发 checkbox 的选中状态，从而改变背景色和滑块位置，实现视觉上的开关效果。
利用相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他非表单元素的外观。
示例：点击复选框显示一段说明文字
<input type="checkbox" id="show-info"> <p class="info-text">这是一段额外信息</p>
.info-text {
display: none;
}
#show-info:checked ~ .info-text {
display: block;
color: #333;
}
当复选框被选中时，后面的 .info-text 段落会显示出来。
以上就是CSS如何使用:checked状态控制选中元素颜色_checked伪类应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
821
收藏
