css - 如何在 CSS 中有效地选择元素的所有直接子元素

Question

在 CSS 中，我需要选择带有 class 的元素的所有直接子元素foobar。显而易见的方法是这样做：

.foo > * {
  foo: bar;
}

这个问题不是重复的。选择所有直接后代 dom 元素而不管类型的问题只是询问如何选择元素的所有直接子元素。答案说使用类似于我上面显示的东西。但是那里的评论和其他地方的评论声称这种方法效率极低，声称*选择器会导致在子选择器生效之前选择所有元素：

请注意，这是一个效率极低的选择器！Css 选择器是从右到左验证的，因此通过在选择器末尾使用星号（*，又名通用选择器），浏览器将选择所有元素，然后开始进一步过滤（在这种情况下：只有直接子元素的元素'body' 元素）。因此，对于小页面，这不是问题，但在较大的单页应用程序中，它可能会减慢速度......

（坦率地说，这对我来说听起来很可疑；浏览器选择算法真的那么不聪明吗？）

所以这个问题是不同的：那么我如何做出有效的等效选择？

我这样做吗？（请注意，我更新了这个选项；我喜欢使用:root，因为我不必引入任何虚拟元素。）

.foo > :not(:root) {
  foo: bar;
}

还是我这样做？

.foo > :nth-child(odd), .foo > :nth-child(event) {
  foo: bar;
}

那些真的比 更有效.foo > *吗？你有更好的建议吗？

（在我的特定用例中，只有大约两三个孩子，但整个文档可能很大。）

标签： csscss-selectors