优先在CSS选择特异性冲突（类型VS类选择）(Precedence in CSS selector

我了解这个选择优先级教程。我很难理解在一种情况下这样做的行为。我有一个HTML元素：

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

问题是，从另一个选择属性覆盖从类的属性。

正如在上面的类图所示得到由较不具体的选择器覆盖。该元件得到由选择input[type="text"]其比一类较不具体。这背后的行为，我看到的唯一理由是， .inputbox类也被计算在确定优先级，即使它不匹配元素。

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

Answer 1:

TL; DR回答

第一条规则是比第二一个更具体 ，因为它既有一个类型和属性部分用于选择器，因此，具有的优先级：

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

更长的答案

你会认为该type="text"位，这是一个属性选择，比类选择更具体的，按照上特异性MDN页：

下面的选择列表是通过增加特异性：
通用选择
类型选择
类选择
属性选择
伪类
ID选择
内嵌样式

以上报价在这个答案撰写时的MDN文章。

为什么误导：

（坦克@ BoltClock的见解。）

以上仅似乎是正确的，但是这是因为你通常包括在选择器（例如，元件input[type="text"]做一个属性选择时）。然而，什么是偷偷摸摸的：在input比特事项。

假设我们有以下标记：

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

在以下情况下输入呈现红色：

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

如果我们反向规则的场景，输入将呈现绿色：

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

这是因为这两种选择都有平等的特异性。现在引入input选择器的属性规则会让他们中的一个更具体的，它可以被看作这个场景：

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

在W3规范，使我的头很疼，但它确实有，为什么上述工程的细节。又见通过@BoltClock答案和评论上的特异性是如何计算的信息的代码示例。

Answer 2:

您的元件是匹配input[type="text"]中的第一个规则。虽然.inputbox选择不匹配它，不影响优先级，因为一个逗号分隔的选择列表只能通过在不匹配的元素列表中的最具体的选择计数。如果没有选择匹配它，然后它不指望在所有。

为什么第一条规则将覆盖第二个原因是因为类选择和属性选择器具有相同的特异性。的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时，选择将是平衡的，你的第二个规则将覆盖第一。

文章来源: Precedence in CSS selector specifity conflicts (type vs class selector)