■“ +”和“〜”同级选择器之间有什么区别？

常规同级选择器 ~ 选择所有属于指定元素的同级元素。

下面的示例选择所有作为 <p> 元素兄弟的 <div> 元素：

div ~ p {
  background-color: blue;
}

相邻同级选择器 + 选择所有与指定元素相邻的同级元素。

下面的示例将选择 <p> 紧随<div> 元素之后的所有 元素：

div + p {
  background-color: red;
}

其他连结

• W3School的CSS组合器页面

• Mozilla的组合器和选择器组页面