CSS子代与子代选择器

我对这两个选择器有些困惑。

后代选择器是否：

div p

选择所有p内div它是否是一个即时descedent？那么，如果p在另一个内部div，则仍会被选中？

然后是子选择器：

div > p

有什么不同？一个孩子意味着直系孩子吗？例如。

<div><p>

与

<div><div><p>

是否都将被选中？

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

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

是的，你是对的。div p将与以下示例匹配，但不会匹配div > p。

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

第一个称为子代选择器，第二个称为子选择器。

Bascailly，“ AB ”所有选择B的内部，而“ A> B ”选择B的东西只是孩子的一个，也不会选择b什么是孩子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}

所有字母都将具有红色背景，因为后代选择器也会选择子字母。

从理论上讲： Child =>祖先的直接后代（例如Joe和他的父亲）

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

实践中：尝试以下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/

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

div p 

选择所有父元素为“ div”元素的“ p”元素

div> p

这意味着直系子代选择所有“ p”元素，其中父代是“ div”元素

CSS选择和将样式应用于特定元素可以通过遍历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>