:checked 选择器是一个 CSS3 选择器，它用于选择处于选中状态的复选框或单选按钮。该选择器对于更改选中元素的外观或行为非常有用。

语法

:checked 选择器的语法如下：

input[type="checkbox"]:checked {
  /* CSS 样式 */
}

或

input[type="radio"]:checked {
  /* CSS 样式 */
}

用法

:checked 选择器可用于各种目的，包括：

• 更改选中元素的颜色或背景。
• 添加边框或阴影。
• 更改字体大小或样式。
• 启用或禁用其他元素。

示例

以下示例将选中时将复选框的背景颜色更改为绿色：

input[type="checkbox"]:checked {
  background-color: green;
}

以下示例将选中时将单选按钮的字体大小更改为 16px：

input[type="radio"]:checked {
  font-size: 16px;
}

与其他选择器的组合

:checked 选择器可以与其他选择器组合使用以实现更复杂的样式。例如，以下示例将仅选中具有特定 ID 的复选框时更改其背景颜色：

#my-checkbox:checked {
  background-color: green;
}

兼容性

:checked 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意

使用 :checked 选择器时需要注意以下几点：

• 仅适用于复选框和单选按钮。
• 选中元素时才会应用样式。
• 样式将覆盖任何其他应用于选中元素的样式。