极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

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

Issue

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

  • + 选择器匹配紧邻的兄弟元素
  • ~ 选择器匹配随后的所有兄弟元素

Author

回答者: QC2168 (opens new window)

# ~ + 选择器不同之处

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

+ 是匹配相邻元素选择器

<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>

Last Updated: 6/26/2022, 10:48:10 AM