随笔- 137 文章- 0 评论- 34 阅读- 97万

CSS选择器之兄弟选择器（~和+）

　　今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。

　　后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。

　　先来代码说话：

　　（1）、‘~’选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .h3 ~ p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <h3 class="h3">这是标题标签</h3>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <h3>这是标题标签</h3>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
</body>
</html>

　　效果如下：

　　（2）、‘+’选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .h3 + p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <h3 class="h3">这是标题标签</h3>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <h3>这是标题标签</h3>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
</body>
</html>