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

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，class = 1，HTML tag = 1。

如果两个选择器具有相同的特异性，那么在CSS文件中进一步向下的选择器将“获胜”。因此，请确保从一般到特定的顺序订购CSS引用;像jquery-ui.css这样的库首先出现，而你的CSS文件则先行。

Answer 3

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