什么是属性选择器的特殊性？(What is the specificity of the attri

我不知道属性选择器的特殊性是什么。 例如：

• ID = 100分
• 类= 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>

其中这2所选择的是更具体的？

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

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

Answer 1:

属性选择同样具体到类选择。

在你的榜样，第一选择是更具体的，因为有一个额外的类型选择input ，导致它击败了第二选择。

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

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

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

Answer 2:

一般情况下，所有类型的选择是相同的; 重要的是在表达选择的数量。 所以ID = 1，类= 1，HTML标记= 1。

在这两个选择具有相同的特异性，一个是在CSS文件中“胜”进一步下跌的事件。 所以一定要确保你从将军令你的CSS引用具体; 像jQuery的ui.css库先走了，而这些后你的CSS文件中去。

文章来源: What is the specificity of the attribute selector?