CSS子对VS后代select器

我在这两个select器之间有些困惑。 后代select器：

div p 

select一个div所有p是否是直接后缀？ 所以如果p是在另一个div它仍然会被选中？

那么孩子select器：

 div > p 

有什么不同？ 孩子是不是指直系孩子？ 例如。

 <div><p> 

VS

 <div><div><p> 

将被选中，还是不？

Answer 1

只要想一下英语中的“孩子”和“后裔”是什么意思：

• 我的女儿既是我的孩子，也是我的后代
• 我的孙女不是我的孩子，但她是我的后裔。

Answer 2

是的，你是对的。 div p将匹配下面的例子，但是div > p不会。

 <div><table><tr><td><p> <!... 

第一个称为后代select器 ，第二个称为子select器 。

Answer 3

Bascailly，“ ab ”selecta内的所有b，而“ a> b ”selectb的a只有小孩，它不会selectb什么是b的孩子。

这个例子说明了这个区别：

 div span{background:red} div>span{background:green} <div><span>abc</span><span>def<span>ghi</span></span></div> 

abc和def的背景颜色是绿色的，但是ghi会有红色的背景颜色。

重要提示：如果您将规则的顺序更改为：

 div>span{background:green} div span{background:red} 

所有的字母都会有红色背景，因为后代select器也会select孩子的。

Answer 4

请注意，Internet Explorer 6不支持子select器。（如果在jQuery / Prototype / YUI等select器中使用select器而不是样式表，它仍然可以工作）

Answer 5

理论上：孩子=>祖先的直系后代（如乔和他的父亲）

后裔=>任何来自特定祖先的元素（例如，乔和他的曾曾祖父）

在实践中：尝试这个HTML：

 <div class="one"> <span>Span 1. <span>Span 2.</span> </span> </div> <div class="two"> <span>Span 1. <span>Span 2.</span> </span> </div> 

与这个CSS：

 span { color: red; } div.one span { color: blue; } div.two > span { color: green; } 

http://jsfiddle.net/X343c/1/

Answer 6

  div p 

select所有“父母”是“div”元素的“p”元素

  div> p 

它意味着直接的孩子select父母是“div”元素的所有“p”元素

Answer 7

CSSselect和应用样式到一个特定的元素可以通过遍历DOM元素[例子

例

 .a .b .c .d{ background: #bdbdbd; } div>div>div>div:last-child{ background: red; } 

 <div class='a'>The first paragraph. <div class='b'>The second paragraph. <div class='c'>The third paragraph. <div class='d'>The fourth paragraph.</div> <div class='e'>The fourth paragraph.</div> </div> </div> </div>