欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-30 10:08:55
...

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>

css相邻兄弟选择器和同辈选择器的区别
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>

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

相关标签： css css

上一篇： 好程序员web前端教程：Math函数

下一篇： 简单的php缓存类分享 php缓存机制_PHP

推荐阅读