css - 指定 element.class { ... } 与仅指定 .class { ... } 的性能提升？

Question

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

Answer 1

如果你有兴趣自己测试，Steve Souders 有一个“CSS Test Creator”，可以让你测试不同 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 毫秒）。但是，使用over是有原因的，那就是灵活性。如果您有一堆元素稍后更改为元素，那么如果您使用规则，则必须修改您的 CSS。如果您使用，则不需要 CSS 更新。.classtag.class<div class="content"><section class="content">div.content.content

一般来说，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>