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

css选择器“+”和“~”的区别

程序员文章站 2022-04-27 23:43:40
...

最大的区别是’+’最多只能匹配到一个元素,而’~’可以匹配到多个。
‘+’是指紧跟在后面的某同级元素
‘~’是指某些同级元素
以以下代码为例

<div class='try'></div>
<p class='one'></p>
<p class='two'></p>

如果是+

.try + p

那么选中的只是类名为one的p

如果是~

.try ~ p

那么选中的是类名为one和类名为two的p

<div class='try'></div>
<h2></h2>
<p class='one'></p>
<p class='two'></p>

那么

.try + p

则什么也选择不到

.try ~ p

则没有影响

相关标签: css选择器