CSS 选择器特异性冲突中的优先级（类型与类选择器）答案

【问题标题】：Precedence in CSS selector specifity conflicts (type vs class selector)CSS 选择器特异性冲突中的优先级（类型与类选择器）
【发布时间】：2013-01-17 23:06:11
【问题描述】：

我从这个tutorial 中了解了选择器优先级。在一种情况下，我很难理解这种行为。我在 HTML 中有一个元素：

<input class="top_bar_login_form_input" type="text"  name="email" placeholder="Prijavno ime">

问题是另一个选择器的属性覆盖了类的属性。

如上图所示，该类被一个不太具体的选择器覆盖。该元素由input[type="text"] 选择，它没有类那么具体。我看到的这些行为背后的唯一原因是 .inputbox 类也在确定优先级时被计算出来，即使它与元素不匹配。

为什么类型选择器会覆盖类选择器？

【问题讨论】：

你要问问题吗？
@keyboardSmasher：你也砸了他：D
我想了解为什么类型选择器会覆盖类，我将编辑我的帖子。

标签： css css-selectors css-specificity

【解决方案1】：

TL;DR 答案

第一个规则比第二个规则更具体，因为它同时具有选择器的类型和属性部分，因此具有优先权：

input[type="text"] { }         /* type + attribute for specificity */
.top_bar_login_form_input { }  /* only class for specificity, so *less* specificity */

更长的答案

你会认为type="text"位，它是一个属性选择器，比一个类选择器更具体，根据the MDN page on specificity：

以下选择器列表是通过增加特异性：

通用选择器

类型选择器

类选择器

属性选择器

伪类

ID 选择器

内联样式

在撰写此答案时，上述引述在 MDN 文章中。

为什么会产生误导：

（转至@BoltClock 的insights。）

上面只有似乎是正确的，但那是因为在执行属性选择器时通常会在选择器中包含元素（例如input[type="text"]）。然而，偷偷摸摸的是：input 位很重要。

假设我们有以下标记：

<input class="my-class" type="text" value="some value" />

在following scenario 中，输入呈现红色：

[type="text"] { color: green; }
.my-class { color: red; }             /* last rule matched */

如果我们颠倒a scenario中的规则，输入会呈现绿色：

.my-class { color: red; }
[type="text"] { color: green; }       /* last rule matched */

这是因为两个选择器具有相同的特异性。现在在属性规则中引入input选择器会让其中一个更加具体，可以看this scenario：

input[type="text"] { color: green; }  /* most _specific_ rule matched */
.my-class { color: red; }

W3 spec 让我头疼，但它确实详细说明了上述工作的原因。有关如何计算特异性的信息，另请参阅这些代码示例中的 the answer by @BoltClock 和 cmets。

【讨论】：

所有浏览器在评估特异性方面都一样吗？
嗯...我在使用 CSS 时遇到了很多跨浏览器（即 IE）的困难，但据我记忆中的具体情况并非如此。（注意：我已经从内存中阻止了 IE6，而 IE7 也正在消失......）
请注意，并非每个浏览器都对选择器提供同等支持。参见例如quirksmode overview。
抱歉，这就是 MDN 完全错误的地方......类、属性和伪类都是同样特定的。请参阅我的回答，了解选择器以这种方式运行的真正原因。
@Borut Flis：IE6 将一系列 .A.B.C 中的链式类视为与最后一个类选择器 .C 相同，因此它的权重仅为 1 个类。其他浏览器将正确计算 3 个类。这只是我所知道的唯一区别，但这与这里无关。

【解决方案2】：

您的元素与第一条规则中的input[type="text"] 匹配。尽管.inputbox 选择器不匹配它，但这不会影响优先级，因为以逗号分隔的选择器列表仅计入列表中确实匹配元素的最具体的选择器。如果没有一个选择器匹配它，那么它根本不计数。

第一个规则覆盖第二个的原因是因为类选择器和属性选择器具有相等的specificity。 input 类型选择器伴随（或伴随）属性选择器是导致它超过单独的类选择器的原因：

/* 1 attribute, 1 type -> specificity = 0-1-1 */
input[type="text"]

/* 1 class             -> specificity = 0-1-0 */
.top_bar_login_form_input

所以第一个选择器比第二个更具体，而不是相反。

如果你用一个类型限定类选择器，所以你有input.top_bar_login_form_input，选择器将被平衡，你的第二个规则将覆盖第一个。

【讨论】：