这些选择器有什么区别？

-1

我在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

来源

2013-04-26 luxi

你已经有你的问题的解释 – musefan 2013-04-26 09:39:23

@musefan - 是的，但问题是他不明白这些解释。 – Quentin 2013-04-26 09:43:20

这里是一个小提琴，所以你可以更好地理解： http://jsfiddle.net/vtH4U/ – Brewal 2013-04-26 09:44:20

相邻选择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混淆。两者都适用于文档中嵌套级别相同的元素，但+特别表示它们必须彼此相邻，而~是任何兄弟元素，因此对于~，可能存在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和d之间的元素，它仍然可以工作，但不会对.c > .d有效。

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

来源

2013-04-26 09:46:49 Spudley

你的意思是如果我们应用e + f 。第一个元素选择。 – luxi 2013-04-26 09:56:07

@ user2253835 - 是的。究竟。 '+'不会选择第二个'f'元素。（如果你想同时选择，你可以用'〜'代替） – Spudley 2013-04-26 09:57:48

非常感谢。 – luxi 2013-04-26 09:59:16

<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

来源

2013-04-26 09:40:01 Quentin

哪个元素选择应用e + f。 – luxi 2013-04-26 09:41:11

@ user2253835 - 与问题的“+”定义具有相同（逐字）描述的那个！ – Quentin 2013-04-26 09:42:41

我的意思是如果我们应用e + f，它会选择e或f？ – luxi 2013-04-26 09:44:07

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

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

E > F与<span>匹配，编号为A。

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

来源

2013-04-26 09:40:10 Sirko

这些选择器有什么区别？

回答

相关问题