面试题：CSS组合选择器中级应用

Question

请描述相邻兄弟选择器（+）和通用兄弟选择器（~）的区别，并举例说明在实际布局中如何使用它们来实现特定样式，比如在一个列表中，使某个列表项之后的所有兄弟列表项文本颜色改变。

Answer 1

区别

1. 相邻兄弟选择器（+）：
   • 选择紧接在另一个元素后的兄弟元素，而且该兄弟元素与前一个元素必须具有相同的父元素。
   • 语法为：prev + next，prev是前一个元素，next是紧跟其后的兄弟元素。
2. 通用兄弟选择器（~）：
   • 选择指定元素之后的所有兄弟元素，这些兄弟元素与指定元素具有相同的父元素。
   • 语法为：prev ~ siblings，prev是前一个元素，siblings是其后的所有兄弟元素。

实际布局举例（列表中使某个列表项之后的所有兄弟列表项文本颜色改变）

假设HTML结构如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

1. 使用相邻兄弟选择器（+）：
   • 如果只想让“列表项2”后的“列表项3”文本颜色改变，可以这样写CSS：

li:nth - of - type(2)+li{
    color: red;
}

• 这里li:nth - of - type(2)选中第二个列表项，+li选中紧跟其后的兄弟列表项（即第三个列表项），使其文本颜色变为红色。

2. 使用通用兄弟选择器（~）：
   • 如果想让“列表项2”后的所有兄弟列表项（“列表项3”和“列表项4”）文本颜色改变，可以这样写CSS：

li:nth - of - type(2)~li{
    color: blue;
}

• 这里li:nth - of - type(2)选中第二个列表项，~li选中其后的所有兄弟列表项（即第三个和第四个列表项），使其文本颜色变为蓝色。