CSS 子选择器与后代选择器

在 CSS 中，选择器是用来选择页面中需要样式化的元素的一种方式。子选择器和后代选择器，是两种常用的选择器类型，用于选择特定的元素或元素组合。

子选择器 (Child Selector)

子选择器是用大于号 (>) 来表示的，它在选择器中指定元素的直接子元素。例如：

ul > li {
  /* 样式规则 */
}

上述代码选择了 <ul> 元素直接子元素中的所有 <li> 元素，并对其应用样式规则。

子选择器非常有用，特别是当你只想选择特定的直接子元素时。例如：

.navigation > li {
  /* 样式规则 */
}

上述代码选择了 class 为 navigation 的元素的直接子元素中的所有 <li> 元素，并对其应用样式规则。

后代选择器 (Descendant Selector)

后代选择器是用空格 ( ) 来表示的，它在选择器中指定元素的后代元素。例如：

div p {
  /* 样式规则 */
}

上述代码选择了 <div> 元素下的所有 <p> 元素，并对其应用样式规则。注意，后代选择器可以选择子元素、子元素的子元素以及更远的后代元素。

后代选择器非常有用，特别是当你想选择某个元素下的所有特定元素时。例如：

.container p {
  /* 样式规则 */
}

上述代码选择了 class 为 container 的元素下的所有 <p> 元素，并对其应用样式规则。

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

子选择器和后代选择器的区别在于它们选择子元素的方式不同：

• 子选择器只选择元素的直接子元素。
• 后代选择器选择元素的所有后代元素，包括子元素、子元素的子元素以及更远的后代元素。

考虑下面的 HTML 结构：

<div class="container">
  <h1>标题</h1>
  <div>
    <p>段落</p>
  </div>
</div>

使用子选择器和后代选择器的示例代码如下：

/* 子选择器 */
.container > div {
  background-color: #ccc;
}

/* 后代选择器 */
.container div {
  background-color: #f1f1f1;
}

上述代码中，子选择器选择了 class 为 container 的元素的直接子元素中的 <div> 元素，而后代选择器选择了 class 为 container 的元素下的所有 <div> 元素。

希望以上内容对你理解 CSS 子选择器与后代选择器有所帮助！如有任何疑问，请随时提问。