CSS类和属性选择器之间的性能

Question

我想知道使用属性选择器而不是类选择器是否存在性能问题.

div.test {}
div[test] {}

PS:我只对CSS性能感兴趣,而不是JS.

Answer 1

根据这篇文章,类选择器比属性选择器更有效.

Answer 2

有人实际上创建了一个现实生活中的选择器测试来展示选择器匹配性能。

该表概述了属性选择器比标准类慢大约 3 倍。

依赖属性选择器还需要更多字符来定位元素。最好定义简短的类名，以保持样式表较小。

例子：

// 17 Characters (attribute)
[title="example"] {
 ...
}

// 6 Characters (class)
.title {
 ...
}

http://scope.bitbucket.org/tests/selector-matching-performance/

Answer 3

不存在性能问题。两者的作用相同。但是 css 的类和元素的特殊性是不同的。

特异性- 特异性决定浏览器应用哪个 CSS 规则。

如果两个选择器应用于同一元素，则特异性较高的选择器获胜。

但特殊性是有层次的。

1. 内联样式（文档中样式的存在）。内联样式存在于您的 XHTML 文档中。它直接附加到要设置样式的元素。例如
2. ID（ID 选择器的数量） ID 是页面元素的标识符，例如#div。
3. 类、属性和伪类（类选择器的数量）。该组包括 .classes、[attributes] 和伪类，例如 :hover、:focus 等。
4. 元素和伪元素（元素（类型）选择器的数量）。包括例如:before 和:after。

资料来源：http ://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

因此div.test {}更加具体。