CSS3屬性選擇器的效率如何？

Question

假設你有這樣的HTML：

<div class='foo-element-1'></div> 
<div class='foo-element-2'></div> 
... 
<div class='foo-element-500'></div> 

CSS：

[class^='foo-'] { font-size: 12px; } 
.foo-element-1 { color: red;  } 
.foo-element-2 { color: blue;  } 
... 
.foo-element-500 { color: green; } 

每.foo-element-###有一個共同的風格[class^='foo-']

---

另一種方式來寫，這可能是：

HTML：

<div class='foo foo-element-1'></div> 
<div class='foo foo-element-2'></div> 
... 
<div class='foo foo-element-500'></div> 

CSS：

.foo    { font-size: 12px; } 
.foo-element-1 { color: red;  } 
.foo-element-2 { color: blue;  } 
... 
.foo-element-500 { color: green; } 

沒有別的用途.foo。所有.foo-element-###將在此選項中附加.foo。假設瀏覽器兼容性是一個非因素，並且有幾百個這樣的元素都有一個共同的風格。

在性能或語義方面使用一種風格是否存在原因？

Answer 1

選擇通過班是一個很好的協議更快：http://jsperf.com/class-vs-data-attribute-selector-performance

此外，它只是普通的很有意義的共享公共樣式元素共享一個通用類。如果元素風格必須偏離共享風格，元素上的第二個類也是很有意義的。

這意味着類選擇器既快又可維護。這裏沒有太多的缺點，其他稍微冗長的標記。但假設您在某個模板語言的循環中生成這些項目，您只需要將該額外的類值寫入一次，並且該循環將複製它。

所以是的，使用類選擇器。這很漂亮。