CSS Child vs Descendant选择器

Question

我在这两个选择器之间有点困惑.

是后代选择器:

div p

选择p一个div是否是一个直接的后代？所以,如果p它在另一个内部div仍然会被选中？

然后是子选择器:

div > p

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

<div><p>

VS

<div><div><p>

会被选中还是不被选中？

Answer 1

试想一下英文中"孩子"和"后代"的含义:

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

Answer 2

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

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

第一个称为后代选择器,第二个称为子选择器.

Answer 3

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}

所有字母都有红色背景,因为后代选择器也会选择孩子.

Answer 4

从理论上讲: 孩子=>祖先的直系后裔(例如乔和他的父亲)

后代=>任何来自特定祖先的元素(例如乔和他的曾祖父)

在实践中:尝试这个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 5

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

Answer 6

分压 

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

div > p

这意味着直接子元素选择所有父元素是“div”元素的“p”元素