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

Quentin指出这是specificity的问题。

将特异性视为以（0,0,0,0）开头的四个数字：

!important规则始终优先，只有另一个！重要规则可以覆盖前一个（它的可访问性功能） CSS，旨在覆盖UA样式表）
通用选择器(*)的特异性为0 - 像+这样的组合器并且~也没有特异性
内联样式具有最高的特异性（除了！important）并算作第一个数字（1,0,0,0）。
ID（#test）计数为上述集合中的第二个数字（0,1,0,0）
类，伪类和属性选择器是第三个数字（0,0,1,0）
类型选择器和伪元素（p＆amp; ::after）取代第四个数字，并且是最不具体的

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

因此在您的示例input[type="text"]中有一个类型选择器和一个属性选择器，这意味着它等于（0,0,1,1）与第二个选择器，它只指定一个类（在特定术语中等于属性选择器），即==到（0,0,1,0）。

要覆盖上一个选择器，您可以包含一个类型选择器，例如：

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

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

Answer 2

类型选择器+属性选择器比类选择器更specific，因此稍后会在cascade中应用。

Answer 3

你可以尝试输入.ac_input ui-state-error {border：1px solid＃B5B8C8; }

Answer 4

尝试添加样式

 #Applications.ui-state-error

为什么这个css不会胜过其他的CSS？

4 个答案: