我有点搞不懂这两个选择器。
后裔选择器是否:
div p
选择div中的所有p,不管它是否是直接子代?所以如果p在另一个div中,它仍然会被选中?
div
p
然后孩子选择器:
div > p
有什么不同?child是否表示立即 child?如。
<div><p>
vs
<div><div><p>
两者是否都被选中?
是的,你说得对。div p将匹配下面的示例,但div > p不匹配。
<div><table><tr><td><p> <!...
第一个叫后代选择器,第二个叫子选择器。
想想“孩子”和“后代”在英语中的意思:
基本上,"一个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}
所有字母的背景都是红色的,因为后代选择器也会选择子字母。
Selects all 'p' elements where at least one parent, grandparent etc. is a 'div' element
表示直系子女 选择所有'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/
使用实例
.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父结点- <div><p>的__abc1
div p匹配具有div祖先(父母,祖父母,曾祖父母等)的__abc1 -在你的问题中<div><p>和<div><div><p>