通过指定element.class {...} vs .class {...}获得性能提升？

Question

如果我知道一个特定的类只会用在div或p上,那么通过指定div.class或p.class而不仅仅是.class,对性能是否有最轻微的影响？

Answer 1

如果您有兴趣自己测试一下,Steve Souders有一个"CSS测试创建器",它可以让您测试不同CSS选择器的速度:

http://stevesouders.com/efws/css-selectors/csscreate.php

我测试了两个.class并a.class使用10,000个规则和10,000个锚点.运行每次测试5次,我得到以下结果:

+----------+-----------+----------+
|  Test #  |  a.class  |  .class  |
+----------+-----------+----------+
|    1     |  2915 ms  |  2699 ms |
|    2     |  3021 ms  |  2869 ms |
|    3     |  2887 ms  |  3033 ms |
|    4     |  2990 ms  |  3035 ms |
|    5     |  2987 ms  |  2980 ms |
+----------+-----------+----------+
|  AVERAGE |  2960 ms  |  2923 ms |
+----------+-----------+----------+

正如你所看到的,.class稍快一点,但微不足道(超过10,000个元素的37毫秒).但是,有是一个理由使用.class过tag.class,那就是灵活性.如果你有一堆<div class="content">元素,你稍后会更改为<section class="content">元素,如果你使用div.content规则,你将不得不修改你的CSS .如果您使用.content,则不需要CSS更新.

通常,tag.class如果您有多个使用相同类的标记类型,我只会使用样式选择器,并且您只想定位特定的标记类型.

Answer 2

是的，.class比 稍快一些element.class。这是因为 CSS 是从左到右读取的，所以.classmeans（“匹配所有类名为.class”的元素），而element.classmeans（“匹配所有类名.class 也为element”的元素）。

然而，element.class将具有比 更高的特异性值.class。