CSS 父子选择器

CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。在 CSS 中，选择器用于指定需要应用样式的 HTML 元素。父子选择器是 CSS 中的一种选择器，它允许我们选择特定的子元素，而这些子元素是其父元素的直接后代或后代。

本文将介绍父子选择器的用法和示例代码，并提供详细解释和运行结果。

1. 简介

父子选择器是通过选择元素的层级关系来应用样式。在 CSS 选择器中，父元素可以通过空格符来与子元素进行关联，从而选择子元素。父子选择器可以帮助开发者更精确地选择需要样式化的元素，提供更灵活的样式控制。

2. 基本语法

父子选择器的基本语法如下所示：

parent_element child_element {
    /* CSS 样式规则 */
}

其中，parent_element 是父元素的选择器，child_element 是子元素的选择器。父子选择器使用空格符表示父子关系，样式规则定义了要应用到子元素的样式。

在下面的示例代码中，我们将演示如何使用父子选择器来样式化 HTML 元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container ul {
            list-style-type: none;
            padding: 0;
        }

        .container li {
            display: inline-block;
            margin: 10px;
            background-color: #f2f2f2;
            padding: 10px;
        }

        .container a {
            color: #333;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

在上面的代码中，我们通过父子选择器 .container ul 和 .container li 来分别选择了包裹列表项的 <ul> 元素和各个列表项 <li> 元素。通过为这些元素设置样式规则，我们实现了一个简单的导航菜单。

3. 示例

在本节中，我们将展示父子选择器的更多用途和示例代码。

3.1 嵌套选择器

父子选择器可以嵌套使用，用于选择更深层次的子元素。在下面的示例代码中，我们通过嵌套选择器来选择了 .container 元素下的直接子元素 <h1> 和所有后代元素的 <p>。代码如下：

.container > h1 {
    color: red;
}

.container p {
    font-size: 16px;
}

3.2 动态效果

父子选择器可以与 CSS 动画和过渡效果一起使用，实现动态的元素样式变化。下面的示例代码演示了如何通过父子选择器实现鼠标悬停时的效果：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container div {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: background-color 0.3s;
        }

        .container:hover div {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>

以上代码中，当鼠标悬停在 .container 元素上时，背景颜色从红色渐变为蓝色。