[分享]css兄弟选择器写法

在CSS中，兄弟选择器是指通过选择器选中某个元素的兄弟元素。兄弟选择器的语法格式为：element1 ~ element2，其中“~”表示兄弟选择器。例如，以下代码表示选择class为box的div元...

在CSS中，兄弟选择器是指通过选择器选中某个元素的兄弟元素。兄弟选择器的语法格式为：element1 ~ element2，其中“~”表示兄弟选择器。

例如，以下代码表示选择class为box的div元素后面的所有p元素：

.box ~ p {
    color: red;
} 

如果HTML代码如下：

<div class="box"></div>
<p>这是第一个p</p>
<p>这是第二个p</p>
<p>这是第三个p</p>
<div></div>
<p>这是第四个p</p>
<p>这是第五个p</p> 

那么，只有第四个和第五个p元素会被设置为红色。

需要注意的是，兄弟选择器选择的兄弟元素必须在选中的元素后面，否则不会生效。

另外，兄弟选择器也可以和其他选择器一起使用，例如：

.box + p, .box ~ div {
    background-color: yellow;
} 

以上代码表示选择class为box的div元素后面相邻的一个p元素和所有后面的div元素，并将它们的背景色设置为黄色。

总的来说，兄弟选择器在CSS中是十分有用的。尤其是在设计布局时，兄弟选择器可以帮助我们更方便地选择和处理元素，提高开发效率。