Question

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

#myDiv .childDiv .grandchildAnchor span

或

#myDiv > .childDiv > .grandchildAnchor > span

您可以假设两者对我的标记有效。我应该如何测试这类东西。是否有一个在线平台，我可以编写我的代码的两个版本，它将在效率方面取得我的结果。

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

鉴于两个CSS选择器，我怎么知道它们哪个工作得更快。只是为了知识。
在线平台，我可以测试两个选择器的渲染。

Answer 1

如果您正在计划哪些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 {
    ...
}

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

Answer 2

有性能测试仪
https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger
使用例子
http://www.html5rocks.com/en/tutorials/speed/css-paint-times/

Answer 3

根据Mozilla的说法，有一个明确的答案：避免后代选择器

后代选择器是CSS中最昂贵的选择器。它是   非常昂贵 - 特别是如果选择器在标签或   普遍类别。

通常，真正需要的是子选择器。对于   例如，表演是如此糟糕，后代选择器是   在Firefox中被禁用＆＃39;用户界面CSS，没有特定的   理由。在您的网页上做同样的事情是个好主意

<强> BAD
      treehead treerow treecell {...}

更好，但仍然不好（参见下一条指南）
      树头＆gt; treerow＆gt; treecell {...}

您可以在以下网址找到以上报价及更多内容： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Answer 4

只需使用ids即可。然后，您可以在自动化测试中获益，参见QTP

高效的CSS选择器

4 个答案: