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

Question

我从这个tutorial了解了选择器优先级。在一个案例中，我无法理解这种行为。我有一个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 */

---

更长的答案

根据the MDN page on specificity，您认为 type="text"位（属性选择器）比类选择器更具体：

  

以下选择者列表是通过提高特异性来实现的：

     

  
• 通用选择器
  
• 类型选择器
  
• 班级选择器
  
• 属性选择器
  
• 伪类
  
• 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以及这些代码示例中的注释，了解有关如何计算特异性的信息。

Answer 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，则选择器将被平衡，第二个规则将覆盖第一个。