CSS子选择器和后代选择器

我有点搞不懂这两个选择器。

后裔选择器是否:

div p

选择div中的所有p,不管它是否是直接子代?所以如果p在另一个div中,它仍然会被选中?

然后孩子选择器:

div > p

有什么不同?child是否表示立即 child?如。

<div><p>

vs

<div><div><p>

两者是否都被选中?

140916 次浏览

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

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

第一个叫后代选择器,第二个叫子选择器

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

  • 我的女儿既是我的孩子,也是我的后代
  • 我的孙女不是我的孩子,但她是我的后代。
请注意,Internet Explorer 6不支持子选择器。 (如果你在jQuery/Prototype/YUI等选择器中使用选择器,而不是在样式表中使用,它仍然有效

基本上,"一个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>

美国广播公司def的背景色将是绿色,但全球健康行动计划的背景色将是红色。

如果你改变规则的顺序为:

div>span{background:green}
div span{background:red}

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

div p 

Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element

div > p

表示直系子女 选择所有'p'元素,其中父元素为'div'元素

< >强理论: Child =>一个祖先的直系后代(例如Joe和他的父亲)

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匹配有div父结点- <div><p>的__abc1

div p匹配具有div祖先(父母,祖父母,曾祖父母等)的__abc1 -在你的问题中<div><p><div><div><p>