CSS 子元素:checked 设置父元素样式|极客教程

CSS 子元素:checked 设置父元素样式

在 CSS 中，我们可以使用 :checked 伪类选择器来选择被选中的表单元素，比如复选框或单选按钮。但是，你可能不知道的是，我们也可以利用 :checked 选择器来设置父元素的样式。在本文中，我们将详细介绍如何使用 :checked 选择器来设置父元素的样式，并提供一些示例代码来帮助你更好地理解这个概念。

示例 1：基本用法

首先，让我们看一个基本的示例，演示如何使用 :checked 选择器来设置父元素的样式。在这个示例中，我们有一个复选框和一个相邻的 <div> 元素，当复选框被选中时，我们将改变 <div> 元素的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :checked 设置父元素样式</title>
<style>
    input[type="checkbox"]:checked + div {
        background-color: lightblue;
    }
</style>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <div>当复选框被选中时，我将改变背景颜色。</div>
</body>
</html>

Output:

CSS 子元素:checked 设置父元素样式

在这个示例中，我们使用 input[type="checkbox"]:checked + div 来选择被选中的复选框的相邻 <div> 元素，并设置其背景颜色为 lightblue。当你选中复选框时，你会看到 <div> 元素的背景颜色发生变化。

示例 2：设置父元素的样式

除了改变相邻元素的样式，我们还可以使用 :checked 选择器来设置父元素的样式。在这个示例中，我们有一个包含多个复选框的列表，当复选框被选中时，我们将改变其父元素 <li> 的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :checked 设置父元素样式</title>
<style>
    input[type="checkbox"]:checked + label {
        color: green;
    }
    input[type="checkbox"]:checked + label + ul {
        background-color: lightyellow;
    }
</style>
</head>
<body>
    <ul>
        <li>
            <input type="checkbox" id="checkbox1">
            <label for="checkbox1">选项 1</label>
            <ul>
                <li>子选项 1</li>
                <li>子选项 2</li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="checkbox2">
            <label for="checkbox2">选项 2</label>
            <ul>
                <li>子选项 1</li>
                <li>子选项 2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Output:

CSS 子元素:checked 设置父元素样式

在这个示例中，我们使用 input[type="checkbox"]:checked + label 来选择被选中的复选框的相邻 <label> 元素，并设置其颜色为 green。同时，我们使用 input[type="checkbox"]:checked + label + ul 来选择被选中的复选框的相邻 <ul> 元素，并设置其背景颜色为 lightyellow。当你选中复选框时，你会看到相应的 <label> 和 <ul> 元素的样式发生变化。

示例 3：使用伪元素

除了直接设置父元素的样式，我们还可以使用伪元素来进一步美化被选中的元素。在这个示例中，我们将为被选中的复选框添加一个勾号图标。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :checked 设置父元素样式</title>
<style>
    input[type="checkbox"] {
        display: none;
    }
    input[type="checkbox"] + label {
        position: relative;
        padding-left: 20px;
    }
    input[type="checkbox"]:checked + label::before {
        content: "\2713";
        position: absolute;
        left: 0;
        color: green;
    }
</style>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox">复选框</label>
</body>
</html>

Output:

CSS 子元素:checked 设置父元素样式

在这个示例中，我们首先将复选框设为不可见，然后使用 input[type="checkbox"] + label 来设置 <label> 元素的样式。最后，我们使用 input[type="checkbox"]:checked + label::before 来为被选中的复选框添加一个勾号图标。当你选中复选框时，你会看到 <label> 元素前面出现一个绿色的勾号图标。

示例 4：结合 CSS 动画

我们还可以结合 CSS 动画来为被选中的元素添加动态效果。在这个示例中，我们将为被选中的复选框添加一个渐变背景色和旋转动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :checked 设置父元素样式</title>
<style>
    input[type="checkbox"] {
        display: none;
    }
    input[type="checkbox"] + label {
        display: block;
        width: 100px;
        height: 100px;
        background-color: lightblue;
        transition: background-color 0.5s;
    }
    input[type="checkbox"]:checked + label {
        background: linear-gradient(to right, lightblue, lightgreen);
        animation: rotate 1s infinite;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox"></label>
</body>
</html>

Output:

CSS 子元素:checked 设置父元素样式

在这个示例中，我们首先将复选框设为不可见，然后使用 input[type="checkbox"] + label 来设置 <label> 元素的样式，并添加了一个背景色渐变和旋转动画。当你选中复选框时，你会看到 <label> 元素的背景色发生渐变，并且会旋转360度。

示例 5：使用 CSS 变量

我们还可以使用 CSS 变量来动态改变被选中元素的样式。在这个示例中，我们将为被选中的复选框设置一个动态的背景色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :checked 设置父元素样式</title>
<style>
    :root {
        --bg-color: lightblue;
    }
    input[type="checkbox"] {
        display: none;
    }
    input[type="checkbox"] + label {
        display: block;
        width: 100px;
        height: 100px;
        background-color: var(--bg-color);
        transition: background-color 0.5s;
    }
    input[type="checkbox"]:checked + label {
        --bg-color: lightgreen;
    }
</style>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox"></label>
</body>
</html>

Output:

CSS 子元素:checked 设置父元素样式

在这个示例中，我们使用 :root 伪类来定义一个 CSS 变量 --bg-color，并将其初始值设为 lightblue。然后，我们使用 input[type="checkbox"] + label 来设置 <label> 元素的样式，并在被选中的复选框上动态改变 --bg-color 变量的值为 lightgreen。当你选中复选框时，你会看到 <label> 元素的背景色从蓝色渐变为绿色。

通过以上示例，你可以看到如何使用 :checked 选择器来设置父元素的样式，并结合其他 CSS 属性和特性来实现更加丰富的效果。