后代选择器

Coddy CSS 选择器课程的第 8 课，共 15 课。

在上一个主题中，我们学习了子组合器，它会选中元素的直接子元素。现在，我们来探索后代选择器，它用空格表示。后代选择器可以选中嵌套在另一个元素中的元素，无论嵌套层级有多深，而不仅仅是直接子元素。

语法

selector1 selector2 {
  /* 属性声明 */
}

例如：

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

上面的 CSS 规则会将两个段落都设置为红色，并将字体大小设为 2em。

它与子选择器有什么关系？

后代选择器比子选择器的范围更广。这意味着后代选择器会匹配指定元素的所有后代元素，而子选择器只会匹配指定元素的直接后代元素。

例如，选择器 div p 会匹配作为 div 元素后代的所有 p 元素，包括嵌套在其他 p 元素中的 p 元素。选择器 div > p 只会匹配作为 div 元素直接后代的 p 元素。

挑战

简单

在上一个练习的基础上，我们继续使用相同的 HTML 结构。使用后代选择器编写 CSS 规则，为 .list 元素内的所有段落设置样式，无论它们嵌套在哪一层。你可以自行选择新的颜色、字号和字体。

亲手试试

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

CSS 选择器的作用为什么它们很重要？

4属性选择器

属性选择器简介存在性和值完全匹配属性值选择器属性值选择器 II 属性值选择器 III

2简单选择器

类型选择器类选择器 ID 选择器通用选择器

3组合选择器

子选择器后代选择器相邻兄弟选择器通用兄弟选择器

自己练习： Web 在线编辑器