css - 高效的 CSS 选择器

Question

我知道我们应该避免使用 CSS 后代选择器，但我只是想知道这两者中哪一个更有效，为什么？

#myDiv .childDiv .grandchildAnchor span

或

#myDiv > .childDiv > .grandchildAnchor > span  

您可以假设两者都对我的标记有效。我应该如何测试这类事情。有没有一个在线平台，我可以在其中编写我的两个版本的代码，它会在效率方面为我获取结果。

编辑:我想学习这些东西。

• 给定两个 CSS 选择器，我怎么知道哪个选择器工作得更快。只是为了知识。
• 在线平台，我可以在其中测试两个选择器的呈现。

Answer 1

如果您围绕哪些更高效的 CSS 选择器来规划您的 CSS 选择器，那么您关注的是错误的问题。

不要因小失大。

以任何有意义的方式减慢浏览器速度需要绝对大量的 HTML 和 CSS，因此与其关注哪个选择器更有效，不如关注哪个选择器是合适的。您可以通过压缩图像、缩小 CSS 和 JS 或简单地从页面中删除单个图像来节省更多性能。

在您的示例中，这两个选择器都不合适且效率不高。除非您有非常充分的理由来嵌套选择，否则您的 CSS 应该优化为:

//specificity 0-0-1-0
.some-span-type {
    ...
}

您可能需要检查跨度是否在特定类型的容器中，在这种情况下您可能需要使用:

//specificity 0-0-2-0
.some-container .some-span-type {
    ...
}

您也可能需要检查跨度是否在一个唯一的容器内，在这种情况下您可能需要使用:

//specificity 0-1-1-0
#some-container .some-span-type {
    ...
}

问题是，一旦您开始使用两个或三个选择器添加更多样式，您很快就会发现您将需要三个或四个或五个选择器来设置后续元素的样式，以正确覆盖现有样式。