html - 在 css 选择器中使用“>”有什么区别（和优势，如果有的话）？

Question

这是css选择器的两个例子，我不知道有什么区别，因此，在什么情况下应该使用哪一个：

.foo-class a{
    /* this will select all anchor tags inside foo-classes */
}

.foo-class > a{
    /* this will also select all anchor tags inside foo-classes, no? */
}

编辑：我刚刚找到了答案。">" 只选择直接子级。我会把问题留在这里，以防其他人觉得它有用。

Answer 1

>表示仅选择 的直接子级foo-class。如果您使用第一个选择器，它将选择foo-class. 在下面的代码中， using>意味着第一个锚点没有被选中，因为它不是foo-class第二个锚点的直接后代。

<div class="foo-class">
    <p>
        <a href="#">Unaffected Link</a>
    </p>
    <a href="#">Affected Link</a>
</div>

没有“优势”，只是控制您选择的内容的不同方式。

Answer 2

第二个是直接子的.foo-class。第一个是每一个里面.foo-class