属性选择器的特异性是什么？

Question

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

• 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>

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

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

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

Answer 1

属性选择器同样特定于类选择器。

在您的示例中，第一个选择器更加具体，因为还有一个附加的类型选择器input使其击败了第二个选择器。

每个选择器的特异性如下calculated：

/* 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文件中位于第二位的选择器“ wins”。因此，请确保从常规到特定顺序对CSS引用进行排序；首先使用jquery-ui.css之类的库，而在其后使用CSS文件。

Answer 3

正如某人在本文前面所说的那样，“属性选择器与类具有相同的特殊性......根据我的经验，我发现这并不是真的...我在输入后使用了类名[type =“ text “]，并且不会覆盖之前的CSS。这是违反直觉的，因为input [type =“ text”]听起来很宽泛。您必须使用一个ID来覆盖它，如果您正在为表单进行输入，则无论如何都应该在该ID上有一个ID以正确连接标签。