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

我有以下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边框颜色？

最佳答案

正如昆廷指出的，这是一个specificity的问题。
把特异性看作是以（0,0,0,0）开头的四个数字：
!important规则总是优先的，只有另一个！重要的
规则可以覆盖前一个规则（它是
CSS，用于覆盖UA样式表）
通用选择器具有0-组合词的特殊性，如(*)
而且+也没有特异性
内联样式具有最高的特殊性（除了！重要的）
算作第一个数字（1,0,0,0）。
ID（~）计为上述集合（0,1,0,0）中的第二个数字
类、伪类和属性选择器是第三个数字
（0,0,1,0）
类型选择器和psuedo元素（#test&p）代替
第四个数字，而且是最不具体的
请记住，如果两个规则具有相同的特殊性并指定相同的属性，则样式表中的后者将获胜。
因此，在您的示例中，::after有一个类型选择器和一个属性选择器，这意味着它等于（0,0,1,1），而第二个选择器只指定一个类（在特定术语中等于属性选择器），即==到（0,0,1,0）。
要覆盖上一个选择器，可以包括类型选择器，例如：

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

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

关于html - 为什么这个CSS不能胜过其他CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16963233/