我想知道属性选择器的特殊性是什么。例如：
例子：
/* 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 { }
属性选择器同样特定于类选择器。
在您的示例中，第一个选择器更具体，因为有一个额外的类型选择器input导致它击败第二个选择器。
每个选择器的特异性计算如下：
/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */
.selectform input[type="text"] { }
/* 2 classes -> specificity = 0-2-0 */
.selectform .inputbg { }
一般来说，所有类型的选择器都是一样的；重要的是表达式中选择器的数量。所以 ID = 1，类 = 1，HTML 标签 = 1。
如果两个选择器具有相同的特异性，则 CSS 文件中更靠后的选择器“获胜”。因此，请确保您的 CSS 引用从通用到特定排序；像 jquery-ui.css 这样的库首先出现，而您的 CSS 文件紧随其后。
正如有人在这篇文章前面所说的那样“属性选择器与类具有相同的特异性”......从我的经验来看，这不是真的......我在输入 [type="text"] 之后使用了一个类名并且它不会覆盖以前的 CSS。这是违反直觉的，因为 input[type="text"] 听起来很宽泛。您必须使用一个 ID 来覆盖它，如果您正在为表单进行输入，那么无论如何您都应该有一个 ID 以正确连接标签。