简介
:checked 是一个伪类选择器，用于选择特定类型的表单控件（如复选框和单选按钮），当它们被用户选中或激活时。这一选择器在样式化表单控件时非常有用，特别是在需要根据用户的输入动态改变样式的情况下。
基本用法
:checked 主要应用于 <input> 元素中的几种类型，包括但不限于：
type="checkbox"(复选框)type="radio"(单选按钮)
示例代码
下面是一个简单的 HTML 和 CSS 示例，展示如何使用 :checked 伪类来改变元素的样式：
HTML
<form> <label> <input type="checkbox" id="check-me"> 我同意条款 </label> </form>
CSS
-- -------------------- ---- ------- -- ---------- -- ---------------------- - -------- ----- - -- ------------------ -- ------------------------------ - ----- - ------ ---- -展开代码
在这个例子中，当用户勾选复选框时，相邻的文本颜色会变为红色。
使用场景
- 条款同意: 在用户必须同意某些条款才能继续使用网站或服务时，可以使用
:checked来确保用户已经阅读并同意了这些条款。 - 动态表单: 在创建具有多个选项的复杂表单时，可以通过
:checked来显示或隐藏某些部分的内容，从而提供更好的用户体验。 - 多步骤表单: 对于多步骤表单，可以根据当前步骤的状态来动态调整表单外观或内容。
与 :checked 相关的选择器
:not(:checked)：用于选择未被选中的元素，常用于设置默认样式或未选中状态下的样式。:checked ~ *：选择被选中元素之后的所有兄弟元素，可用于样式化复选框或单选按钮周围的其他内容。
浏览器兼容性
:checked 伪类在现代浏览器中得到了广泛支持。但是，对于一些较旧的浏览器版本，可能需要进行额外的测试和兼容性处理。
总结
:checked 是一个强大且实用的 CSS 选择器，能够帮助开发者更好地控制和定制表单元素的行为和外观。通过结合其他 CSS 技巧和 JavaScript，可以实现更加复杂的交互效果和动态样式变化。
