孩子和后代选择器之间的区别[重复]答案

【问题标题】：The difference between the child and the decendent selector [duplicate]孩子和后代选择器之间的区别[重复]
【发布时间】：2011-03-15 11:00:06
【问题描述】：

这些似乎做同样的事情。我一直不确定有什么区别。

<style>
    #a > b > i{
        color: blue;
    }
    #b b i{
        color: red;
    }
</style>
<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
</div>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

有区别。

> 是一个 child 选择器，它只选择 direct/immediate 元素，而 #a b i 将选择指定父级内任意深度的子元素。

对于您的标记：

<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
</div>

两者都应该工作，但在这种情况下，子选择器仍然更合适。考虑一下：

<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
<b><i>text<div><span><i>text</i></span>></div></i></b>
</div>

在上述情况下，子选择器不会应用于<div><span><i>text</i></span>></div> 中的 span 元素内的<i>，它不是<b>element 的直接子元素。

更多信息：

CSS Child Selectors

【讨论】：

第三个单词的错字;) 区别

【解决方案2】：

来自specs

儿童
当且仅当 B 是 A 的父元素时，元素 A 称为元素 B 的子元素。
后代
元素 A 称为元素 B 的后代，如果 (1) A 是 B 的子代，或 (2) A 是某个元素 C 的子代，而 C 是 B 的后代。

【讨论】：