我想知道使用属性选择器而不是类选择器是否存在性能问题。
div.test {}
div[test] {}
附注: 我只对 CSS 性能感兴趣，对 JS 不感兴趣。
根据这篇文章，类选择器比属性选择器更有效。
有人实际上创建了一个现实生活中的选择器测试，展示选择器匹配性能。
该表概述了属性选择器的速度比标准类慢大约 3 倍。
依赖属性选择器还需要更多字符来定位元素。最好定义简短的类名，以保持样式表较小。
示例：
// 17 Characters (attribute)
[title="example"] {
...
}
// 6 Characters (class)
.title {
...
}
http://scope.bitbucket.org/tests/selector-matching-performance/
根据这个项目，不存在真正的性能问题。
这让我们感到惊讶，因为选择器的性能并不是真正的 关心我们的日常工作一段时间。前端性能是 当然，这很重要，但是 CSS 选择器似乎贡献了这样的作用 与总页面加载时间相比微不足道 我们认为这可能是许多人主要关心的问题。
他们也有基准。 编辑：请参阅评论：他们有基准想法*，而不是基准。
不存在性能问题。两者的作用相同。但是带有 class 的 css 与 Elements 的 css 的特异性是有区别的。
特异性 - 特异性决定了浏览器应用哪个 CSS 规则。
如果两个选择器应用于同一元素，则特异性较高的选择器获胜。
但是特异性是有层次的。
来源：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
因此
div.test {}数据属性较慢，但没到我关心的程度。用 JS 测试它给我这些结果：
Test name Executions per second
.....................................
Class 5017198.0 Ops/sec
ID 3808182.0 Ops/sec
data attribute 3289109.0 Ops/sec
https://measurethat.net/Benchmarks/ShowResult/436379
我很确定纯 CSS 速度要快得多。
1
不存在性能问题。两者的作用相同。但是带有 class 的 css 与 Elements 的 css 的特异性是有区别的。
特异性 - 特异性决定浏览器应用哪个 CSS 规则。
如果两个选择器应用于同一元素，则特异性较高的选择器获胜。
但是特异性是有层次的。
内联样式（文档中样式的存在）。内联样式存在于您的 XHTML 文档中。它直接附加到要设置样式的元素。例如。 ID（ID 选择器的数量） ID 是页面元素的标识符，例如#div。 类、属性和伪类（类选择器的数量）。该组包括 .classes、[attributes] 和伪类，例如 :hover、:focus 等。 元素和伪元素（元素（类型）选择器的数量）。包括例如：之前和：之后。强文本