CSS 子代选择器

CSS 子代选择器语法

在 CSS 中，子代选择器用于选取某个元素的 “直接子元素” 。它只会选择父元素的下一级子元素，而不会选择更深级别的后代元素。

语法：

A > B {
    ……
}

说明：

在子代选择器中，A 元素和 B 元素之间使用 “>” 选择符，表示选中 A 元素内部的直接子元素 B。

子代选择器非常适合用于精确控制父子关系的场景，比如导航菜单、列表项或特定容器内的元素样式。

注意: 子代选择器只会匹配直接子元素，例如 “<div><p>直接子元素</p></div>” 中的 <p> 会被选中，但 “<div><section><p>嵌套元素</p></section></div>” 中的 <p> 不会被选中。

CSS 子代选择器示例

接下来，我们通过几个简单的例子来讲解一下 CSS 如何使用子代选择器。

示例 1：使用 CSS 子代选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #lvye > p
        {
            color: red;
        }
    </style>
</head>
<body>
    <div id="lvye">
        <p>这是子元素</p>
        <p>这是子元素</p>
        <div>
            <p>这是子元素的子元素</p>
            <p>这是子元素的子元素</p>
        </div>
        <p>这是子元素</p>
        <p>这是子元素</p>
    </div>
</body>
</html>

页面效果如下图所示。

CSS 子代选择器示例

分析：

#lvye>p 表示选中 id="lvye" 的元素下的所有子元素 p。需要注意的是，子代选择器只选取子元素，不包括其他后代元素。

如果将 #lvye>p 改为 #lvye p，也就是改为使用后代选择器，此时页面效果如下图所示。

CSS 后代选择器效果

子代选择器与后代选择器的区别

在 CSS 中，子代选择器（>）跟后代选择器（空格）很相似，但两者却有着明显的区别。

子代选择器：选取的是元素内部某一种子元素（只限子元素）。
后代选择器：选取的是元素内部所有的元素（包括子元素）。

提示: 子代选择器，只会选择 “亲儿子”。而后代选择器，选择的是 “子子孙孙”。

示例 2：子代选择器 vs 后代选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 后代选择器 */
        .container p { color: blue; }
        /* 子选择器 */
        .container > p { color: red; }
    </style>
</head>
<body>
    <div class="container">
        <p>直接子元素</p>
        <section>
            <p>嵌套子元素</p>
        </section>
    </div>
</body>
</html>

页面效果如下图所示。

子代选择器 vs 后代选择器

分析：

在这个例子中，后代选择器 “.container p { color: blue; }” 会选择 .container 内部所有的 p 元素，并将其颜色设置为蓝色。如果没有后面的 “.container > p { color: red; }” ，此时所有的 p 元素应该都是蓝色才对。

但由于后面有 .container > p { color: red; }，该选择器会选择 .container 内部的直接子元素 p，并将其颜色设置为红色。此外，子代选择器和后代选择器的优先级是相同的，后来的会覆盖先来的，最终直接子元素 p 会变为红色。