[分享]css3找兄弟元素

CSS3 中有一个很有用的选择器叫做兄弟选择器，它可以帮助我们方便地找到某一元素的所有兄弟元素。这个选择器的语法如下： element ~ sibling 其中，element 是指某一元素，~ 符...

CSS3 中有一个很有用的选择器叫做兄弟选择器，它可以帮助我们方便地找到某一元素的所有兄弟元素。这个选择器的语法如下：

  element ~ sibling 

其中，element 是指某一元素，~ 符号表示选取指定元素之后所有的兄弟元素，sibling 则是指某一兄弟元素。具体来说，这个选择器会选取 element 后面的所有 sibling 元素，但不包括 element 本身。

下面举一个例子来说明：

  <div class="parent">
            <p>这是一个段落</p>
            <p>这是另一个段落</p>
            <span>这是一个 span 元素</span>
            <p>这是最后一个段落</p>
        </div>

        .parent p ~ p {
            color: red;
        } 

在这个例子中，我们给所有在 p 元素之后的 p 元素设置了红色的文本颜色。注意，这个选择器不会选取第一个 p 元素，因为它不是 p 元素之后的一个兄弟元素。

因此，通过使用兄弟选择器，我们可以轻松地对多个兄弟元素进行操作，而不必一个一个地选取它们。