CSS中`~`符号用法解析：为何示例中Spain和Italy背景为黄色？

一、~选择器的本质 #

~是CSS里的通用兄弟选择器，语法为A ~ B，作用是：选择所有和A元素同级、且位于A元素之后的B元素。只要满足“同级”+“在A之后”这两个条件，不管A和B之间隔了多少其他元素，B都会被选中；但A的子元素里的B不会被匹配。

二、示例代码分析 #

CSS代码 #

div ~ p {
  background-color: yellow;
}

HTML代码 #

<div class="container">
   <p>Belgium</p>
   <div>
      <p>French</p>
   </div>
   <p>Spain</p>
   <p>Italy</p>
</div>

逐个分析每个<p>元素的匹配情况：

• <p>Belgium</p>：它位于目标<div>（包含<p>French</p>的div）之前，不满足“在div之后”的条件，不会被选中，背景无变化。
• <p>French</p>：它是内部<div>的子元素，和外部的目标<div>不属于同级元素，不符合选择器规则，背景无变化。
• <p>Spain</p>：它和目标<div>是同级元素，且位于目标<div>之后，完全符合div ~ p的匹配条件，因此背景变为黄色。
• <p>Italy</p>：它同样是目标<div>的同级兄弟，且在目标<div>之后，也会被选中，背景变为黄色。

内容的提问来源于stack exchange，提问作者poporp