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

Question

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

当我看到w3schools的课程时，它解释了那四个选择器，但我对解释特别是第一学期和第二学期非常困惑，它看起来是一样的，任何人都可以给出简单的例子来解释那四个选择器有什么不同？

Answer 1

以此代码段为例：

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

1. div p - ＆gt;将选择“Something”和“This is inside”。
2. div > p - ＆gt;只会选择“Something”。

另一个片段

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

1. div + p：只会选择“Something”。[只有第一个元素]
2. div ~ p：将在p
之后选择div个元素

Answer 2

div > p匹配

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

但不匹配

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

这是'内部元素'（第二个）和'父元素'之间的区别（第一个）。第二个示例中<p>的父级是页脚，因此footer > p会匹配，div p也会匹配。

div + p会匹配

的p

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

但不适用于

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

因为{/ 1>}不是之后的。在此示例中，<p>将匹配，因为此选择器仅要求p跟随DOM树的同一级别上的div。