:checked 伪类用于选中处于选中状态的表单元素，如 radio、checkbox 和 option。通过结合兄弟选择器可实现样式切换，例如 checkbox 选中时文字变绿：#agree:checked + label { color: green; }。常用于隐藏默认控件并自定义外观，如 .custom-checkbox:checked + label::before 设置背景色。还可控制其他元素显示，实现纯 CSS 的展开收起效果，如 .menu-toggle:checked ~ .toggle-content 显示内容。该选择器适合创建无 JavaScript 交互。
在 CSS 中，可以通过 :checked 伪类选择器来选中处于“选中状态”的表单元素，主要用于 单选按钮（radio）、复选框（checkbox） 和 下拉选项（option）。
基本语法
:checked 会匹配当前被用户选中的这些控件：
input[type=”radio”] 被选中时 input[type=”checkbox”] 被勾选时 被选中时（在 下拉菜单中）
用法示例
假设有一个 checkbox：
你想在它被选中时让文字变绿，可以这样写 CSS：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label { color: green;}
这里使用了相邻兄弟选择器（+），表示选中被勾选的 checkbox 后面紧跟着的 label。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
配合隐藏元素实现自定义样式
常用于隐藏默认的 checkbox 或 radio，用 label 来显示自定义外观：
.custom-checkbox { display: none;}.custom-checkbox + label::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; margin-right: 8px;}.custom-checkbox:checked + label::before { background-color: blue; border-color: blue;}
当 checkbox 被选中时，label 前的小方块会变成蓝色背景。
用于控制其他元素显示（如手风琴菜单）
利用 :checked 可以实现纯 CSS 的展开/收起效果：
.toggle-content { display: none;}.menu-toggle:checked ~ .toggle-content { display: block;}
点击关联的 checkbox，就能显示对应内容。
基本上就这些。:checked 是一个非常实用的选择器，特别适合做无 JavaScript 的交互效果。关键是要结合 HTML 结构合理使用属性选择和兄弟选择器。
以上就是在css中如何用checked选择选中状态元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1010059.html
微信扫一扫 
支付宝扫一扫 
