css - 指定 element.class { ... } 与仅指定 .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 个 anchor 。每个测试运行 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 ，这就是灵 active 。如果你有一堆<div class="content">您稍后更改为 <section class="content"> 的元素元素，如果使用 div.content，则必须修改 CSS规则。如果您使用 .content ，则不需要 CSS 更新。

一般来说，我只会使用tag.class样式选择器，如果您有多个使用相同类的标签类型，并且您只想定位特定标签类型。