CSS 后代选择器

CSS 后代选择器语法

CSS 后代选择器，用于选择元素内部中所有的某一个元素，包括子元素和其他后代元素。

语法：

A B {
    ……
}

说明：

在后代选择器中，A 元素和 B 元素之间用空格隔开，表示选中 A 元素内部后代 B 元素（所有 B 元素）。

注意: 后代选择器会匹配所有符合条件的后代元素，因此可能会影响比预期更多的元素。小伙伴们在使用时要谨慎，避免样式冲突。

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 会选择 .container 内部所有的元素。而子代选择器 .container > p 只会选择 .container 的直接子元素。

由于子代选择器和后代选择器的优先级是相同的，然后后来的会覆盖先来的。因此 .container > p { color: red; } 只会影响直接子元素，而不会影响其他后代元素。