指定element.class {...}和僅僅.class {...}的性能增益？

Question

如果我知道一個特定的類只會用於div或p，那麼通過指定div.class或p.class而不是.class來對性能產生最輕微的影響嗎？

Answer 1

是的，.class比element.class稍快。這是因爲CSS是從左向右讀，所以.class手段（「誰擁有.class類的名稱相匹配的所有元素‘），而element.class手段（’誰擁有.class類名匹配的所有元素誰也一個element」 ）。

但是，element.class將具有比.class更高的特異性值。

Answer 2

如果您有興趣測試這個自己，史蒂夫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稍快，但不顯着所以（僅爲37微秒超過10000元）。然而，是使用.class而不是tag.class的原因，那就是靈活性。如果您有一堆<div class="content">元素，您稍後更改爲<section class="content">元素，則必須修改CSS，如果使用div.content規則。如果您使用.content，則不需要CSS更新。

一般來說，如果您有多個使用相同類的標記類型，並且您只想定位特定的標記類型，則只會使用tag.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>