我有点搞不懂这两个选择器。
后代选择器:
div p
选择所有的p在一个div，无论它是否是直接下降?所以如果p在另一个div中，它仍然会被选中?
然后子选择器:
div > p
有什么不同?孩子是指直系子女吗?如。
<div><p>
vs
<div><div><p>
两者是否都被选中?
当前回答
是的，你说得对。Div p将匹配下面的示例，但Div > p不匹配。
<div><table><tr><td><p> <!...
第一个是后代选择器，第二个是子选择器。
其他回答
是的，你说得对。Div p将匹配下面的示例，但Div > p不匹配。
<div><table><tr><td><p> <!...
第一个是后代选择器，第二个是子选择器。
注意，Internet Explorer 6不支持子选择器。 (如果你在jQuery/Prototype/YUI等选择器中使用选择器，而不是在样式表中，它仍然有效)
在理论: 一个祖先的直系后代(例如乔和他的父亲)
Descendant =>任何来自某个特定祖先的元素(例如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/
div p
选择所有'p'元素，其中至少有一个父元素、祖父元素等是'div'元素
div > p
这意味着直系子女 选择父元素为'div'的所有'p'元素
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>
