【CSS】相邻兄弟选择器

原创已于 2023-03-26 09:11:40 修改 · 5.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-06-15 20:56:00 首次发布

Css/Html 专栏收录该内容

51 篇文章

订阅专栏

本文详细讲解了HTML中的相邻兄弟选择器(+)和同级兄弟选择器(~)，展示了如何利用它们精准定位元素并举例说明了在实际代码中的应用。

相邻兄弟选择器

- 相邻选择器(+)
- 兄弟选择器(~)

相邻选择器(+)

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用

相邻兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
测试代码：

<html>
    <head>
        <style type="text/css">
            h2{font-size: 12px;}
            h2+div{font-size: 16px; color: red ;background-color: blue;}

        </style>
    </head>
    <body>
        <h2>HTML文档树状结构</h2>
        <div>问君能有几多愁，恰似一江春水向东流</div>
        <p>问君能有几多愁，恰似一江春水向东流</p>
        <div>问君能有几多愁，恰似一江春水向东流</div>
        <div>问君能有几多愁，恰似一江春水向东流</div>
    </body>
</html>

预览效果：
在这里插入图片描述

兄弟选择器(~)

通过波浪符号(~)分割符进行定义，其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用

测试代码：

<html>
    <head>
        <style type="text/css">
            h2{font-size: 12px;}
            h2~div{font-size: 16px; color: red ;background-color: blue;}

        </style>
    </head>
    <body>
        <h2>HTML文档树状结构</h2>
        <div>问君能有几多愁，恰似一江春水向东流</div>
        <p>问君能有几多愁，恰似一江春水向东流</p>
        <div>问君能有几多愁，恰似一江春水向东流</div>
        <div>问君能有几多愁，恰似一江春水向东流</div>
    </body>
</html>