[分享]css兄弟选择器怎么用

CSS兄弟选择器可以帮助我们选择兄弟元素中的特定元素。使用兄弟选择器需要使用相邻的兄弟元素，而且它们必须在同一个父元素中。.selector1 ~ .selector2 { / CSS样式 / } 如...

CSS兄弟选择器可以帮助我们选择兄弟元素中的特定元素。使用兄弟选择器需要使用相邻的兄弟元素，而且它们必须在同一个父元素中。

.selector1 ~ .selector2 {
  /* CSS样式 */
} 

如上代码所示，兄弟选择器使用波浪号（~）来连接两个选择器，在此例中，选择器1选择了其中一个兄弟元素，而选择器2选择被选择的兄弟元素。

请注意，兄弟选择器是双向的，也就是选择器1和选择器2的顺序并不会影响选择器的功能。

以下是一个示例代码：

<div>
  <p>CSS兄弟选择器</p>
  <p>这是第一段</p>
  <p>这是第二段</p>
  <p>这是第三段</p>
  <p>这是第四段</p>
</div> 

我们可以使用以下代码，将第二段的颜色设置为红色：

p:first-child ~ p:nth-of-type(2) {
  color:red;
} 

如上代码所示，选择器1选择了第一个p元素，而选择器2选择了第二个p元素。因此，第二个p元素将会变成红色。

使用CSS兄弟选择器可以轻松选择同一父元素中的兄弟元素，让我们的样式更加灵活多样。