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

【问题标题】：What is the specificity of the attribute selector?属性选择器的特殊性是什么？
【发布时间】：2012-07-09 13:17:48
【问题描述】：

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

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

【问题讨论】：

特异性不会像您认为的那样计入“点”：stackoverflow.com/questions/2809024/points-in-css-specificity
查看演示tinkerbin.com/IaZW8jbI
您可能想阅读 this article 开头的粉碎杂志，它解释了特异性的工作原理
.selectform input[type="text"] 的特异性为 2-1（一个类1-0，一个标签1 和一个属性1-0），而.select-form .inputbg 的特异性为2-0（两个班）。 2-0 不能覆盖 2-1。如果它们相等（即：.selectform input.inputbg），则会应用最后一个。

标签： html css css-selectors css-specificity

【解决方案1】：

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

【讨论】：

一个类选择器有一个1-0 特异性，等于一个属性选择器。但是input[type="text"] 具有1-1 的特异性（1-0 来自属性，1 来自标签），它不能被1-0 特异性覆盖。要覆盖它，您至少需要1-1（即：input.your-class）。

【解决方案2】：

一般来说，所有类型的选择器都是一样的；重要的是表达式中选择器的数量。所以 ID = 1, class= 1, HTML 标签 = 1。

如果两个选择器具有相同的特异性，则 CSS 文件中更靠后的选择器“获胜”。因此，请确保您的 CSS 引用从通用到特定排序；像 jquery-ui.css 这样的库在前面，而你的 CSS 文件在后面。

【讨论】：

补充一点：这些通常被称为“简单选择器”。在选择器中，只考虑简单的选择器和伪元素，而不考虑组合器。在逗号分隔的组中，对选择器组的每个部分分别计算特异性。

【解决方案3】：

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

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

每个选择器的具体是calculated如下：

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

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

【讨论】：

有趣，因为#foo {} 的特异性为 1-0-0，而[id="foo"] {} 选择相同的元素，但特异性大大低于 1-0。
@chharvey：正确 - 这是因为 CSS 本身没有任何从 ID/类选择器到任何特定属性的映射，因此任何属性选择器都将具有相同的特异性，而不管属性名称如何。这种映射是由浏览器根据文档语义而不是 CSS 语义执行的。恰好属性和类选择器具有相同的特性（很可能使事情保持简单）。