Question

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

Answer 1

如果你有兴趣自己测试一下，Steve Souders有一个“CSS测试创建器”，可以测试不同CSS选择器的速度：

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

我使用10,000个规则和10,000个锚来测试.class和a.class。运行每次测试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是从左到右阅读的，所以.class表示（“匹配所有类名为.class的元素”）而element.class表示（“匹配所有拥有.class 的班级名称，他们也是element “。

但是，element.class的特异性值高于.class。

Answer 3

我知道这不是问题，但它会影响特异性，因此在下面的示例中，innerClassFails不会覆盖包含的tds，而table.innerClass会覆盖它。

<style>
table.outerClass td {
    color: red;
}

table.innerClass td {
    color: green;
}

.innerClassFails td {
    color: green;
}
</style>
<table class='outerClass'><tr><td><table class='innerClass'><tr><td>Hello!</td></tr></table></td></tr></table>

<table class='outerClass'><tr><td><table class='innerClassFails'><tr><td>Hello!</td></tr></table></td></tr></table>

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

3 个答案: