# '+' 与 '~' 选择器有什么不同

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 317 (opens new window)

Author

Author

~ 是匹配元素之后的选择器

+ 是匹配相邻元素选择器

<div>我是div</div>
<p>我是p</p>
<p>我是p</p>
<div>我是div</div>
<p>我是p</p>
<div>
  <p>我是div下面的p</p>
  <p>我是div下面的p</p>
</div>
<span>我是span</span>


<style>
    div+p {
        color: red;
    }

    /* 第一个p标签变红色了 */

    div~p{
        color:red;
    }

    /* div后面的p标签都变成红色了 */
</style>

Author

div 后相邻的 p 标签文字都会变红，而不是只有第一个 p 标签变红