面试题：CSS中等难度面试题：复合选择器的应用

Question

请描述一下后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器的区别，并举例说明在实际场景中如何使用它们来精准定位HTML元素进行样式设置。

Answer 1

后代选择器

• 定义：后代选择器用于选择指定元素的所有后代元素。语法是用空格分隔两个选择器，如 父元素 子元素。
• 区别：它不仅匹配直接子元素，还匹配更深层次的后代元素。
• 实际场景示例：在一个网页导航栏结构中，HTML 代码如下：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">产品</a>
    <ul>
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
    </ul>
  </li>
</ul>

如果想设置导航栏内所有链接的颜色为蓝色，可以使用后代选择器：

.nav a {
  color: blue;
}

子选择器

• 定义：子选择器用于选择指定元素的直接子元素。语法是用 > 符号分隔两个选择器，如 父元素 > 子元素。
• 区别：仅匹配直接子元素，不会匹配更深层次的后代元素，这是与后代选择器的主要区别。
• 实际场景示例：在一个文章列表页面，文章标题和内容结构如下：

<article class="post">
  <h2 class="post-title">文章标题</h2>
  <p class="post-content">文章内容</p>
</article>

如果只想设置文章的标题样式，比如字体加粗，可以使用子选择器：

.post > .post-title {
  font-weight: bold;
}

相邻兄弟选择器

• 定义：相邻兄弟选择器用于选择紧接在指定元素之后的相邻兄弟元素。语法是用 + 符号分隔两个选择器，如 前一个元素 + 后一个元素。
• 区别：它只选择紧邻的下一个兄弟元素，不是所有后续兄弟元素。
• 实际场景示例：在一个图片与描述的布局中，HTML 代码如下：

<img src="image.jpg" alt="图片">
<p class="image-caption">这是图片的描述</p>

如果想给图片的描述文字设置特殊样式，比如字体倾斜，可以使用相邻兄弟选择器：

img + .image-caption {
  font-style: italic;
}

通用兄弟选择器

• 定义：通用兄弟选择器用于选择指定元素之后的所有兄弟元素。语法是用 ~ 符号分隔两个选择器，如 前一个元素 ~ 后一个元素。
• 区别：与相邻兄弟选择器不同，它选择所有后续兄弟元素，而不仅仅是紧邻的下一个。
• 实际场景示例：在一个网页的侧边栏，有一系列的导航项，HTML 代码如下：

<div class="sidebar">
  <h3>导航</h3>
  <a href="#">导航项1</a>
  <a href="#">导航项2</a>
  <a href="#">导航项3</a>
</div>

如果想给 h3 标题之后的所有导航项设置样式，比如添加下划线，可以使用通用兄弟选择器：

.sidebar h3 ~ a {
  text-decoration: underline;
}