想想“孩子”和“后代”在英语中的意思：

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

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

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

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

Bascailly，“a b”选择a中的所有b，而“a>b”选择 b的 * a 的唯一子节点，它不会选择 * b* 的子节点 b 的子节点 a 的子节点。
此示例说明了差异：

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}

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

**在理论上：**子=>祖先的直接后代（例如乔和他的父亲）

Descendant =>从特定祖先继承的任何元素（例如乔和他的曾曾祖父）

**在实践中：**试试这个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

选择所有的'p'元素，其中至少有一个父元素，祖元素等。是'div'元素

div > p

它表示直接子元素选择父元素为div元素的所有p元素

div > p匹配问题中具有div父项的p-<div><p>
div p匹配具有div祖先（父代、祖父母、曾祖父母等）的p-问题中的<div><p>和<div><div><p>

所有选择器之间的区别由视觉DOM树：

CSS选择和应用样式到特定元素可以通过遍历dom元素来完成[示例
Example

.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>