html - 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

此外，让共享通用样式的元素共享一个通用类是很有意义的。如果元素样式必须偏离共享样式，则元素上的第二个类也很有意义。

这意味着类选择器更快且更易于维护。这里没有太大的缺点，只是标记稍微冗长一些。但是假设您在某种模板语言的循环中生成这些元素，您只需要编写一次额外的类值，循环就会复制它。

所以，是的，使用类选择器。真是太甜了。