CSS3兄弟选择器简介及用法示例

CSS3中的兄弟选择器（Sibling Selector）是一种强大的选择器，它允许我们选择在同一父级元素下的特定兄弟元素。本文将介绍兄弟选择器的语法，并提供一些实例代码来演示其用法。

兄弟选择器的语法如下：

element1 ~ element2

其中，element1和element2可以是任意的HTML元素选择器，而~表示选择element1之后的所有element2元素。换句话说，兄弟选择器会匹配到所有在element1之后的同级element2元素。

下面是一些兄弟选择器的示例代码：

示例1：选择所有兄弟元素

<style>
    p ~ span {
        color: red;
    }
</style>

<p>这是第一个段落。</p>
<span>这是第一个段落之后的第一个span元素。</span>
<span>这是第一个段落之后的第二个span元素。</span>
<span>这是第一个段落之后的第三个span元素。</span>

在上面的示例中，我们使用了兄弟选择器 p ~ span 来选择所有在 <p> 元素之后的 <span> 元素，并将它们的文本颜色设置为红色。因此，第一个段落之后的所有 <span> 元素都会被选中并应用了红色文本颜色。

示例2：