[分享]css兄弟不相邻选择器

在CSS中，选择器是用来选择相应元素并定义其样式的途径。在大多数情况下，我们使用子选择器和相邻选择器来精确选择我们想要的元素。但是有时候我们需要选择一个元素后面的兄弟元素，但又不是相邻兄弟。那么这时...

在CSS中，选择器是用来选择相应元素并定义其样式的途径。在大多数情况下，我们使用子选择器和相邻选择器来精确选择我们想要的元素。但是有时候我们需要选择一个元素后面的兄弟元素，但又不是相邻兄弟。那么这时候就需要使用“兄弟不相邻选择器”。

兄弟不相邻选择器的语法如下:

element1~element2{
    style properties
} 

这条规则表示选取所有element1后面的兄弟元素element2，包括中间的其他元素，而不考虑它们与element1的距离。

下面是一个例子：

div~p {
    color: red;
} 

这条规则表示，将所有跟在 div 后面的 p 元素的文本颜色设置为红色。

需要注意的是，这个选择器只会选择在element1后面的元素，而不会选择前面的元素，如下面的例子所示:

  <div>
           <p>我是第一个p元素</p>
           <ul>
                <li>列表1</li>
                <li>列表2</li>
           </ul>
           <p>我是第二个p元素</p>
           <div>
                <p>我是第三个p元素</p>
           </div>
       </div> 

div~p{
    color: red;
} 

运用上述规则，只有第二个和第三个p元素的文本颜色会变成红色

总结：兄弟不相邻选择器是一种非常有用的选择器，允许我们选择element1后面的所有元素，而不管它们距离element1的距离如何。