在CSS中,[class] [class]比[element] [class]快吗？

Question

我知道这很挑剔但是我正在和一个编辑器一起工作,这个编辑器会发现CSS并不断抱怨

don't use adjoining classes > e.g.  .foo.bar

我忽略了这些警告,但这让我很好奇,也找不到任何东西.说我有:

  <ul class="foo bar"></ul>

哪个CSS选择器更快:

  ul.foo
  .bar.foo

我知道选择器从右到左工作,因此在两种情况下foo都会先选择,之后浏览器必须找到所有ul选择(？)或所有.bar元素(？).

问题:
在CSS中,[class][class]速度快于[element][class]？

谢谢!

Answer 1

我认为一般规则，以及我自己注意到的一个规则是，使用 .class .class 会稍微快一些，尽管它取决于页面本身（我想在一定程度上应用了哪些样式）。

不同选择器的速度一般约定为（从最快到最慢）；

ID -> 类 -> 类型 -> 相邻 -> 子代 -> 后代 -> 通用 -> 属性 -> 伪

就个人而言，我认为从标记的角度来看，我也会发现使用类来选择第一个元素更有利。它避免了如果将来添加相同类型的元素可能会受到 CSS 影响的可能性。

这也符合许多 CSS 编写指南，这些指南说使用类来实现样式化目的更有意义。

我还记得一篇介绍 CSS 效率的好文章。我希望这篇文章现在能同意我的观点，因为我已经有一段时间没有读它了。在网站上的某个地方，他们还研究了编写 CSS 的块元素修饰符技术，这是一本有趣的读物，如果你想更有效地构建你的 CSS，这是一个很好的起点（尽管它需要你花点时间来理解第一个）时间）。