Css 什么'；s元素~element和元素+之间的区别；要素

这两个CSS选择器之间的区别是什么。我从他们两人身上得到了相同的结果

HTML:

这为

元素提供了红色背景

:

这也为

元素提供了红色背景

所以。。。这两个选择器之间有什么区别？

来自：

E+F紧跟在E元素前面的F元素

E~FE元素前面的F元素

重要的单词是“立即”

---

在HTML中，由于没有其他元素，因此看不到区别，但在一般情况下，这当然很重要。

直接同级：

直接跟随div元素的div+p元素

p+*直接跟随p元素的任何元素

间接兄弟姐妹

div~p元素在div元素之后的任意位置

p~*p元素之后的任意元素

参考资料：

---

。将另一个p添加到html中，您将发现区别所在

<div>One</div>
<p>Two</p>

div+p {
background:red;
}

div~p {
background:red;
}