html - 为什么这个 css 不胜过其他 css？

Question

我有以下 css(按此顺序):

textarea, input[type="text"], select {
border: 1px solid #B5B8C8;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
border: 1px solid #CD0A0A;
 }

我有一个看起来像这样的文本框:

  <input type="text" name="Applications" value="" id="Applications" class="fullRowTextBox ac_input ui-state-error" autocomplete="off">

它似乎使用了这种颜色:#B5B8C8 而不是#CD0A0A 颜色。

我认为下面的 CSS 会胜过上面的 CSS。

此文本框未获得#CD0A0A 边框颜色的任何原因？

Answer 1

这是specificity的问题正如昆汀指出的那样。

将特异性视为以 (0,0,0,0) 开头的四个数字:

1. !important 规则始终优先，只有另一个 !important规则可以覆盖之前的规则(它是CSS，旨在覆盖 UA 样式表)
2. 通用选择器 (*) 的特异性为 0 - 像 + 这样的组合器而~也没有特异性
3. 内联样式具有最高的特异性(除了 !important)并算作第一个数字 (1,0,0,0)。
4. ID (#test) 算作上述集合 (0,1,0,0) 中的第二个数字
5. 类、伪类和属性选择器是第三个数字(0,0,1,0)
6. 类型选择器和伪元素(p & ::after)代替第四个数字，并且是最不具体的

请记住，如果两个规则具有相同的特异性并指定相同的属性，则样式表中的后者将获胜。

因此在您的示例中，input[type="text"] 具有一个 类型选择器和一个 属性选择器，这意味着它等于 ( 0,0,1,1) 与仅指定 一个 类的第二个选择器(在特异性方面等同于属性选择器)，它 == 到 (0,0,1, 0).

要覆盖之前的选择器，您可以包含一个类型选择器，例如:

input.ui-state-error {
border: 1px solid #CD0A0A;
}

尽管两个选择器具有相同的特异性，但由于 cascade 的性质，第二个将优先.