面试题：CSS选择器中等难度面试题

Question

请解释CSS中后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器的区别，并分别举例说明如何使用它们来选择特定的HTML元素。

Answer 1

后代选择器

1. 区别：后代选择器用于选择指定元素的所有后代元素，无论嵌套多深。
2. 示例：假设有如下HTML结构：

<div class="parent">
  <p>这是直接子元素</p>
  <div>
    <p>这是后代元素</p>
  </div>
</div>

CSS代码为：

.parent p {
  color: red;
}

上述代码会将class为parent的div内所有p元素文字颜色设为红色。

子选择器

1. 区别：子选择器仅选择指定元素的直接子元素，不会选择孙辈等更深层次的元素。
2. 示例：对于同样的HTML结构：

<div class="parent">
  <p>这是直接子元素</p>
  <div>
    <p>这是后代元素</p>
  </div>
</div>

CSS代码为：

.parent > p {
  color: blue;
}

上述代码只会将class为parent的div的直接子元素p的文字颜色设为蓝色，孙辈p不受影响。

相邻兄弟选择器

1. 区别：相邻兄弟选择器选择紧接在指定元素之后的兄弟元素，前提是它们具有相同的父元素。
2. 示例：HTML结构如下：

<div class="container">
  <h1>标题</h1>
  <p>紧接在h1之后的段落</p>
  <p>另一个段落</p>
</div>

CSS代码为：

h1 + p {
  color: green;
}

上述代码会将紧接在h1之后的p元素文字颜色设为绿色，第二个p不受影响。

通用兄弟选择器

1. 区别：通用兄弟选择器选择指定元素之后的所有兄弟元素，前提是它们具有相同的父元素。
2. 示例：还是上述HTML结构：

<div class="container">
  <h1>标题</h1>
  <p>紧接在h1之后的段落</p>
  <p>另一个段落</p>
</div>

CSS代码为：

h1 ~ p {
  color: orange;
}

上述代码会将h1之后的所有p元素文字颜色设为橙色。