CSS性能在类和属性选择器之间 [英] CSS Performance between class and attribute selectors

问题描述

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

I'm wondering if there is a performance issue using attribute selectors instead of class selectors.

div.test {}
div[test] {}

推荐答案

两者都一样。但是类与css的具​​体性有所不同。

There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.

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

Specificity - Specificity determines, which CSS rule is applied by browsers.

如果两个选择器适用于同一个元素，则具有较高特异性的选择器会赢得。

但特殊性有层次。

1. 内联样式（在文档中存在样式）。
   内联样式存在于XHTML文档中。它直接连接到要定型的元素。例如。


2. ID （ID选择器的数量）
   ID是您的网页元素的标识符，例如#div。


3. 类，属性和伪类（类选择器的数量）。
   此组包括.classes，[attributes]和伪类，如：hover，：focus等。


4. 元素和伪元素元素（类型）选择器的数量。
   包括例如：before和：after。

1. Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.
2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

源： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-您应该知道/

因此 div.test {} 更具体。

这篇关于CSS性能在类和属性选择器之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！