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

CSS 中有几种不同的选择器，包括后代选择器和子选择器。尽管它们看起来很相似，但它们实际上有一些明显的区别。

后代选择器（descendant selector）用于选择嵌套在另一个元素里的元素。它使用空格作为分隔符。例如：

/* 选择器匹配所有 <article> 标签内的 <p> 标签 */
article p {
  color: red;
}

在这个例子中，article 是父元素，p 是后代元素。后代选择器可以匹配任何深度的后代关系，不论是相邻的或不相邻的父元素。因此，在上面的样式表中，article p 将匹配 <article> 标签内的任何深度的 <p> 标签。

子选择器（child selector）也用于选择嵌套在另一个元素里的元素。不同的是，子选择器只会选择直接子元素，而不会选择所有后代元素。它使用 > 作为分隔符。例如：

/* 选择器只匹配 <article> 标签直接内部的 <p> 标签 */
article > p {
  color: blue;
}

在这个例子中，article 是父元素，p 是直接子元素。子选择器只能匹配直接子元素，所以它无法匹配 <article> 标签内嵌套的深度更深的 <p> 标签。

这是两种选择器的主要区别。总之，后代选择器和子选择器之间有一个空格或 > 分隔符，但是它们所选择的元素有着显著的区别。后代选择器可以选择所有嵌套在另一个元素中的元素，而子选择器只能选择直接子元素。