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? */
}

编辑：我刚刚找到答案。 “＆gt;” 中只选择直接孩子。我会在这里留下这个问题，以防其他人发现它有用。

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>

没有“优势”，只是控制你选择的方式的另一种方式。

Answer 2

第二个是直接.foo-class的孩子。第一个是内部.foo-class

使用“＆gt;”有什么区别（以及优点，如果有的话）在css选择器？

2 个答案: