在表单开发中，我们常常需要根据用户的选择或控件的可用状态来调整外观。CSS提供的:checked和:disabled伪类选择器能够直接选中特定状态的表单元素，从而实现无脚本的状态样式控制。
一、:checked伪类选择器
:checked用于匹配被选中的单选按钮（<input type="radio">）、复选框（<input type="checkbox">）以及下拉选项（<option>）。它可以配合相邻兄弟选择器来修饰关联元素。
基础用法示例
下面代码在复选框被勾选时，将后面文字变为绿色并加粗：
<style>
input[type="checkbox"]:checked + span {
color: green;
font-weight: bold;
}
</style>
<label>
<input type="checkbox">
<span>我已阅读协议</span>
</label>
二、:disabled伪类选择器
:disabled用来选中被禁用的表单元素，比如添加了disabled属性的输入框或按钮。我们可以用它降低视觉权重，提示用户当前不可操作。
禁用按钮样式
以下示例将禁用按钮设为灰色并更改鼠标样式：
button:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
}
三、组合使用场景
实际项目中，我们可能同时区分选中和禁用状态。例如一个开关项，未选中时可禁用提交：
<style>
/* 选中时高亮 */
input:checked {
outline: 2px solid blue;
}
/* 禁用时变灰 */
input:disabled {
opacity: 0.5;
}
</style>
<input type="checkbox" checked>
<input type="text" value="不可编辑" disabled>
四、注意事项
- :checked仅对可勾选类元素生效，不能用于普通文本框。
- :disabled匹配所有带disabled属性的表单控件，包括select和textarea。
- 若用JavaScript动态修改disabled或checked，样式会自动跟随更新。
合理运用这两个伪类，可以让表单状态样式更清晰，也减少依赖JS控制类的麻烦。