这些css选择器之间有什么不同？

当我看到w3schools的课程时，它会以此来解释这四个选择器，但我对解释感到非常困惑，尤其是第一学期和第二学期，它看起来是一样的，任何人都可以给出简单的例子来解释这四个选择器的不同之处。

以这个片段为例：

element element     div p   Selects all <p> elements inside <div> elements  1
element>element     div > p     Selects all <p> elements where the parent is a <div> element    2
element+element     div + p     Selects all <p> elements that are placed immediately after <div> elements   2
element1~element2   p ~ ul  Selects every <ul> element that are preceded by a <p> element

div+p：只会选择“某物”。[仅第一个元素] div~p：将选择div后面的两个p元素 div>p不匹配

<div>
</div>
<p>Something</p>
<p>This is inside</p>

但不是为了

<section>
    <div></div>
    <p></p>
</section>

---

因为不是紧随其后。在本例中，div~p将匹配，因为此选择器只要求p在DOM树的同一级别上跟随div。

您有可用的文档。请尝试使用W3C来详细解释。您可以在此处找到选择器的完整列表：。尽管W3学校有所改进，但您仍然无法击败MDN:Check。

<div>
    <p>foo</p>
</div>

<div>
    <footer>
        <p>Foo</p>
    </footer>
</div>

<section>
    <div></div>
    <p></p>
</section>

<section>
    <div></div>
    <span></span>
    <p></p>
</section>