如何使用CSS :checked 伪类选择被选中的复选框或单选按钮？

在本文中，我们将学习如何使用CSS :checked 伪类选择器来选择被选中的复选框或单选按钮。:checked 伪类是CSS3中的一个非常有用的选择器，可以帮助我们在样式表中针对选中状态的元素进行样式设置。

:checked 伪类的基本用法

要使用 :checked 伪类选择器，我们需要通过CSS选择器语法将其与目标元素进行配对。例如，要选择一个被选中的复选框，可以使用以下代码：

input[type="checkbox"]:checked

这将匹配所有被选中的复选框元素，并应用样式设置。

:checked 伪类的详细用法

除了基本用法外，:checked 伪类还可以与其他选择器进行组合使用，以实现更精确的选择。例如，我们可以使用 :checked 伪类与相邻选择器 (+) 来选择被选中的复选框的下一个元素：

input[type="checkbox"]:checked + label

这将选择被选中的复选框的下一个 label 元素，并对其应用样式设置。

代码案例

下面是一个简单的代码案例，演示如何使用 :checked 伪类选择器来实现复选框的样式设置：

<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>

<style>
input[type="checkbox"]:checked + label {
  color: red;
}
</style>

通过上述代码，当用户选中复选框时，对应的 label 文本将变为红色。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS :disabled 伪类选择被禁用的表单元素
• 下一篇： 如何使用CSS :not() 伪类排除指定元素的选择？