我有点困惑这两个选择器之间的区别。
后代选择器:
div p
如何选择所有在一个 div
下面的 p
,无论它们是否是直接子元素?也就是说,如果这个 p
在另一个 div
中,它仍然会被选中吗?
接下来是 子元素 选择器:
div > p
有什么区别吗?child的意思是指直接的子元素吗?例如:
<div><p>
vs
->对比
<div><div><p>
两个都会被选择,还是都不会被选择?
我有点困惑这两个选择器之间的区别。
后代选择器:
div p
如何选择所有在一个 div
下面的 p
,无论它们是否是直接子元素?也就是说,如果这个 p
在另一个 div
中,它仍然会被选中吗?
接下来是 子元素 选择器:
div > p
有什么区别吗?child的意思是指直接的子元素吗?例如:
<div><p>
vs
->对比
<div><div><p>
两个都会被选择,还是都不会被选择?
想一想英语中“child”和“descendant”的意思:
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}
所有字母都将拥有红色背景,因为后代选择器会选择子元素。
理论上: Child => 祖先的直接后代(例如,乔和他的父亲)
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; }
red
和blue
被交换了)。 - Pang请注意,子选择器在Internet Explorer 6中不受支持。 (如果您在jQuery / Prototype / YUI等选择器中使用该选择器而不是在样式表中使用,则仍然有效)
div p
选择所有父元素为'div'元素的'p'元素,包括祖先元素。
div > p
它意味着只选择直接子元素,即选择所有父元素为'div'元素的子'p'元素。
div > p
匹配具有 div
父元素的 p
元素 - 在您的问题中是 <div><p>
div p
匹配具有 div
祖先元素(父元素、祖父元素、曾祖父元素等)的 p
元素 - 在您的问题中是 <div><p>
和 <div><div><p>
可以通过遍历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>