CSS兄弟选择器

1.作用

选择某元素的兄弟元素。

2.语法

选择器 + 元素{}

选中器选中的元素的紧邻的下一个指定元素

举例:选中c下面的第一个兄弟

...
        .c + p{
            color: skyblue;
        }
...
<body>
    <div>
        <p class="c">这是c</p>
        <p>这是c下面第一个兄弟</p>
        <p>这是c下面第二个兄弟</p>
        <p>这是c下面第三个兄弟</p>
    </div>
</body>

CSS兄弟选择器


选择器 ~ 元素{}

选择器选中的元素的下面的所有指定元素

举例:选中c下面的所有兄弟

...
        .c ~ p{
            color: skyblue;
        }
...
<body>
    <div>
        <p class="c">这是c</p>
        <p>这是c下面第一个兄弟</p>
        <p>这是c下面第二个兄弟</p>
        <p>这是c下面第三个兄弟</p>
    </div>
</body>

CSS兄弟选择器

相关文章: