html - 这些选择器有什么区别？

Question

我在http://www.w3.org/TR/selectors/#selectors看到以下内容，但我无法正确理解。它是什么？

E + F   an F element immediately preceded by an E element 
E > F   an F element child of an E element 

Answer 1

<e></e><f></f>  — an F element immediately preceded by an E element
<e><f></f></e>  — an F element child of an E element

Answer 2

<div>
  <span id="A"></span>
</div>
<div id="B"></div>

E + F<div>与 id匹配B。

E > F<span>与 id匹配A。

所以区别在于，元素F是元素的兄弟还是子元素E。

Answer 3

• 相邻的选择器E + F：

这将选择F元素旁边的E元素，在相同的嵌套级别。例如：

    .a + .b { background-color:blue; }

    <div class='a'>.....</div>
    <div class='b'>This will be blue, because it is next to the 'a' element.</div>

注意：不要与兄弟选择器混淆，E ~ F. 两者都适用于文档中处于相同嵌套级别的元素，但+特别意味着它们必须彼此相邻，而~任何兄弟元素都是如此，因此and~之间可能存在另一个元素，它仍然可以工作，但不是为.ab+

• 子选择器E > F：

这将选择F元素内部的E元素，即更深一层嵌套。例如：

    .c > .d { background-color:red; }

    <div class='c'>
        <div class='d'>This will be red, because it is immediately inside the 'c' element.</div>
    </div>

注意：不要与后代选择器混淆E F，后者也查看相互嵌套的元素，但它可以应用于任何级别的嵌套。因此对于，和.c .d之间可能嵌套更多元素，它仍然可以工作，但对于.cd.c > .d

我希望这能为你澄清事情。