CSS选择器特定冲突的优先级(类型与类选择器)

Question

我从本教程中了解了选择器优先级.在一个案例中,我无法理解这种行为.我有一个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,则选择器将被平衡,第二个规则将覆盖第一个.