Question

这些似乎做同样的事情。我从来不知道区别是什么。

<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>

Answer 1

存在差异 。

>是子选择器，仅选择直接/立即元素，其中#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>

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

更多信息：

CSS Child Selectors

Answer 2

从specs

开始

儿童
      当且仅当B是A的父元素时，元素A才被称为元素B的子元素   的后代
      元素A被称为元素B的后代，如果（1）A是B的子元素，或者（2）A是某个元素C的子元素，它是B的后代。

子元素和后代选择器之间的区别

2 个答案: