孩子和后代选择者之间的区别

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>span元素中<div><span><i>text</i></span>></div>,而不是<b>元素的直接子元素.

更多信息:

CSS儿童选择器