在CSS中，我需要选择一个类为foobar的元素的所有直接子元素。显而易见的方法是这样做：
.foo > * {
foo: bar;
}
这个问题不是重复的。问题Select all direct descendant dom elements regardless of type仅询问如何选择元素的所有直接子元素。答案说使用的是我上面显示的内容。但是a comment there和comment elsewhere声称这种方法效率极低，声称*选择器将导致子选择器生效之前所有元素都被选择：
请注意，这是一个效率极低的选择器！ CSS选择器是从右到左验证的，因此，通过在选择器的末尾使用星号（*，又称通用选择器），浏览器将选择所有元素，然后开始进一步过滤（在这种情况下：仅是直接子元素的元素） “身体”元素）。因此，对于小页面而言，这不是问题，但在较大的单页面应用程序中，它可能会使速度变慢...
（坦白说，这听起来很可疑；浏览器选择算法真的不是那么聪明吗？）
所以这个问题是不同的：然后我如何做出有效的等效选择？
我这样做吗？ （请注意，我更新了此选项；我喜欢使用:root，因为我不必引入任何虚拟元素。）
.foo > :not(:root) {
foo: bar;
}
还是我这样做？
.foo > :nth-child(odd), .foo > :nth-child(event) {
foo: bar;
}
真的比.foo > *更有效率吗？您有更好的建议吗？
（在我的特定用例中，大约只有两个或三个孩子，但是整个文档可能很大。）