CSS中:checked选择器的使用技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS :checked 选择器在复选框与单选按钮中的应用》，聊聊，我们一起来看看吧！

:checked 伪类选择器用于匹配选中的 radio 或 checkbox，可结合 label 和兄弟选择器实现自定义样式、主题切换等无 JS 交互效果，关键在于正确关联元素以确保可访问性。

:checked 是 CSS 中的一个伪类选择器，用于匹配处于“选中”状态的单选按钮（radio）或复选框（checkbox）输入元素。它在无需 JavaScript 的情况下实现交互式 UI 效果非常有用，比如显示隐藏内容、切换样式或创建自定义控件。

基本语法与使用场景

:checked 选择器可以配合 input 元素的 type="radio" 或 type="checkbox" 使用。当用户选中某个选项时，对应的样式规则就会生效。

常见用法包括：

• 自定义单选/复选样式
• 控制其他元素的显示与隐藏
• 制作无 JS 的开关、菜单或模态框

在复选框中的应用

当 checkbox 被勾选时，:checked 可以触发样式变化。例如，可以隐藏默认的复选框，并用自定义图标或背景表示选中状态。

<input type="checkbox" id="agree">
<label for="agree">我同意条款</label>

这里通过隐藏原生 checkbox，利用 label 和伪元素 ::after 来绘制一个绿色对勾，仅在 :checked 时显示。

在单选按钮中的应用

对于 radio 按钮，:checked 常用于突出当前选中项，或者联动控制其他区域的样式。

<input type="radio" name="theme" id="light" checked>
<label for="light">浅色</label>

&lt;input type=&quot;radio&quot; name=&quot;theme&quot; id=&quot;dark&quot;&gt;
<label for="dark">深色</label>

<div class="panel">这是一个面板</div>

利用兄弟选择器（~），可以基于哪个 radio 被选中来动态改变 .panel 的样式，实现简单的主题切换效果。

基本上就这些。:checked 结合 label、相邻兄弟选择器（+）和普通兄弟选择器（~），能实现丰富的视觉反馈和交互逻辑，是构建现代表单体验的重要工具。关键在于结构合理，确保可访问性和语义正确。不复杂但容易忽略细节，比如必须保证 input 和 label 关联正确才能点击 label 触发选中。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS中:checked选择器的使用技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。