属性选择器的特殊性是什么？ [英] What is the specificity of the attribute selector?

问题描述

我想知道属性选择器的特异性。例如：

I'm wondering what the specificity of the attribute selector is. For example:

• Id = 100分


• Class = 10分


• HTML标记= 1分

示例：

/* this specificity value is 100 + 10 + 1 = 111 */
#hello .class h2 { }

使用此HTML：

<div class="selectform">
<input type="text" value="inter text">
<input type="text" value="inter text" class="inputag">
</div>

这两个选择器中哪一个更具体？

Which of these 2 selectors is more specific?

.selectform input[type="text"] { }
.selectform .inputbg { }

检查演示 http://tinkerbin.com/IaZW8jbI

推荐答案

属性选择器同样专用于类选择器。

Attribute selectors are equally specific to class selectors.

在您的示例中，第一个选择器更具体，因为有一个额外的类型选择器输入，导致它击败第二个选择器。

In your example, the first selector is more specific because there is an additional type selector input that causes it to beat the second selector.

每个选择器的特异性是计算如下：

The specificity of each selector is calculated as follows:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */
.selectform input[type="text"] { }

/* 2 classes                    -> specificity = 0-2-0 */
.selectform .inputbg { }

这篇关于属性选择器的特殊性是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！