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>的{{1}}匹配。

B与身份E > F的{{1}}匹配。

不同的是，元素<span>是元素A的兄弟还是子元素。

Answer 3

相邻的选择器E + F：

这会在同一嵌套级别选择F元素 {/ 1}}元素旁边的元素。例如：

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具体表示它们必须彼此相邻，而+是任何兄弟元素，因此对于~可能是~和a之间的另一个元素，它仍然有用，但不适用于b。

子选择器+：

这会选择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之间，它仍然有用，但不适用于c。

我希望能为你澄清一些事情。

这些选择器有什么区别？

3 个答案: