6

我从本教程中了解了选择器优先级。在一种情况下，我无法理解这种行为。我在 HTML 中有一个元素：

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

问题是来自另一个选择器的属性会覆盖类中的属性。

图片

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

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

4

2 回答 2

11

TL;DR 答案

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

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

更长的答案

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

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

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

于 2013-02-02T21:21:42.273 回答
7

您的元素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，选择器将是平衡的，你的第二个规则将覆盖第一个。

于 2013-02-03T05:45:27.580 回答