`:checked`伪类是CSS中实现无JavaScript交互的利器，通过巧妙结合HTML结构与CSS选择器（如`+`和`~`），不仅能轻松控制内容显隐、打造高度自定义的复选框和滑动开关，还能构建多级菜单与选项卡切换等复杂UI效果；它以零JS依赖、高性能响应和跨浏览器一致性，为前端开发提供了一种简洁而强大的交互解决方案——原来纯CSS也能让页面“活”起来。
:checked 是 CSS 中一个非常实用的伪类选择器，主要用于匹配处于“选中状态”的单选按钮（radio）或复选框（checkbox）。虽然它本身不能改变表单元素的逻辑行为，但结合 HTML 和 CSS 可以实现丰富的视觉交互效果。以下是几个常见的使用技巧和实用场景。
利用 :checked 配合相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他元素的显示或隐藏，无需 JavaScript。
例如：点击复选框展开/收起内容区域。
GPT plus 代充 只需 145这里是被隐藏的内容
#toggle + .content { display: none; } #toggle:checked + .content { display: block; }
这样，当复选框被选中时，后面的 .content 就会显示出来。
默认的复选框样式在不同浏览器中表现不一致。:checked 可以配合隐藏原生控件，用 CSS 绘制更美观的自定义样式。
GPT plus 代充 只需 145
#custom-checkbox { display: none; } .custom-checkbox { width: 18px; height: 18px; border: 2px solid #ccc; display: inline-block; position: relative; cursor: pointer; } #custom-checkbox:checked + .custom-checkbox::after { content: "✔"; color: #4CAF50; font-size: 14px; position: absolute; top: -2px; left: 2px; }
通过隐藏原始 input，使用 label 模拟点击，并用 ::after 添加对勾符号，实现跨浏览器一致的视觉效果。
将复选框变成现代风格的滑动开关，提升界面体验。
GPT plus 代充 只需 145
.switch { width: 50px; height: 24px; background: #ddd; border-radius: 12px; position: relative; display: inline-block; transition: background 0.3s; } .switch::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: left 0.3s; } #switch:checked + .switch { background: #4CAF50; } #switch:checked + .switch::after { left: 28px; }
选中时背景变绿，小圆球滑动到右侧，形成典型的开关样式。
使用多个 radio 或 checkbox，结合 :checked 和 ~ 选择器，可实现无 JS 的选项卡或折叠菜单。
例如：用 radio 模拟单选选项卡：
GPT plus 代充 只需 145首页内容设置内容
.panel { display: none; } #tab1:checked ~ #home, #tab2:checked ~ #settings { display: block; }
通过 ~ 选择器选中对应面板，实现简单的标签页切换。
基本上就这些。合理使用 :checked 能减少对 JavaScript 的依赖，提升页面响应速度，同时让交互更直观。关键是结构要清晰，input 必须在相关元素之前或附近，确保选择器能正确匹配。不复杂但容易忽略细节。
文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《:checked选择器使用技巧全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/249122.html