在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.在下面的代码中,使用>意味着没有选择第一个锚,因为它不是第二个锚的直接后代foo-class.

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

没有"优势",它只是控制你选择的一种不同的方式.