是的，你说得对。Div p将匹配下面的示例，但Div > p不匹配。

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

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

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

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

注意，Internet Explorer 6不支持子选择器。 (如果你在jQuery/Prototype/YUI等选择器中使用选择器，而不是在样式表中，它仍然有效)

基本上，"a b"选择了a里面的所有b，而"a>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}

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

div p 

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

div > p

这意味着直系子女 选择父元素为'div'的所有'p'元素

在理论: 一个祖先的直系后代(例如乔和他的父亲)

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/

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>

在你的问题中，Div > p匹配有Div父元素的ps - < Div ><p>

Div p匹配具有Div祖先(父母，祖父母，曾祖父母等)的ps -在您的问题中< Div ><p>和< Div >< Div ><p>