CSS选择器特性冲突中的优先级（类型与类选择器） [英] Precedence in CSS selector specifity conflicts (type vs class selector)

问题描述

我从这篇：

下面的选择器列表是通过增加特异性来实现的：

• 通用选择器


• >
  
• 类选择器


• 属性选择器


• 伪类


• ID选择器


• 内联样式

MDN文章在这个答案写的时候。

为什么会产生误导：

（Tanks @ @ BoltClock的分析。）

只是似乎正确，但这是因为你通常在选择器中包含元素（例如 input [type =text] 属性选择器。但是，什么鬼鬼祟：输入位重要。

假设我们有以下标记：

 < input class =my-classtype =textvalue =some value/> 
  

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

  [type = text] {color：green; } 
 .my-class {color：red; } / *上一个规则匹配* / 
  

如果我们改变情景，输入将呈现绿色：

  .my-class {color：red; } 
 [type =text] {color：green; } / *上次规则匹配* / 
  

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

  input [type =text] {color：绿色; } / * most _specific_ rule matched * / 
 .my-class {color：red; } 
  

W3 spec 使我的头受伤，但它有上面的工作为什么的细节。另请参见 @BoltClock的答案和这些代码示例中的注释，了解如何计算特异性。

I learned about selector precedence from this tutorial. I have trouble understanding the behavior of this in one case. I have an element in HTML:

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

The problem is that properties from another selector override the properties from the class.

As shown in the picture above the class gets overridden by a less specific selector. The element gets selected by input[type="text"], which is less specific than a class. The only reasoning behind these behavior that I see is that the .inputbox class is also calculated in determining the precedence, even though it doesn't match the element.

Why does the type selector override the class selector?

解决方案

TL;DR Answer

The first rule is more specific than the second one because it has both a type and attribute part for the selector, and thus has precedence:

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

---

Longer answer

You'd think that the type="text" bit, which is an attribute selector, is more specific than a class selector, in accordance with the MDN page on specificity:

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

The above quote was in the MDN article at the time this answer was written.

Why that is misleading:

(Tanks to @BoltClock's insights.)

The above only seems correct, but that's because you typically include the element in the selector (e.g. input[type="text"]) when doing an attribute selector. However, what's sneaky: the input bit matters.

Suppose we have the following markup:

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

In the following scenario the input renders red:

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

If we reverse the rules in a scenario, the input will render green:

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

This is because both selectors have equal specificity. Now introducing the input selector to the attribute rule will make one of them more specific, which can be seen in this scenario:

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

The W3 spec makes my head hurt, but it does have the details on why the above works. See also the answer by @BoltClock and comments in those code examples for info on how the specificity is calculated.

这篇关于CSS选择器特性冲突中的优先级（类型与类选择器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！