css相邻兄弟选择器和同辈选择器的区别

最新推荐文章于 2023-12-08 09:29:09 发布

nhw649

最新推荐文章于 2023-12-08 09:29:09 发布

阅读量1.3k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_46176479/article/details/107699303

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.相邻兄弟选择器，定义+号后面那个选择器的属性。
选择器1+选择器2{声明1；声明2；…}
在HTML代码中，（引用）选择器1元素后面相邻着（引用）选择器2元素，则属性声明有效。
标准浏览器才支持。
提示：必须相邻才会有效。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .br1 + .br2 {
            color: #f00;
        }
    </style>
</head>
<body>
<p class="br1">我是p元素</p>
<p class="br2">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
</body>
</html>

在这里插入图片描述
2.同辈选择器，定义~号后面所有选择器的属性。
选择器1~选择器2{声明1；声明2；…}
在HTML代码中，（引用）选择器1元素后面所有（引用）选择器2元素，则属性声明有效。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .br2 ~ .br1 {
            color: #f00;
        }
    </style>
</head>
<body>
<p class="br1">我是p元素</p>
<p class="br2">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
<p class="br1">我是p元素</p>
</body>
</html>