2

我有以下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 边框颜色的任何原因？

4

4 回答 4

6

正如昆汀指出的那样，这是一个具体问题。

将特异性视为以 (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的性质，第二个将优先。

于 2013-06-06T13:26:28.657 回答
3

类型选择器 + 属性选择器比类选择器更具体，因此稍后在级联中应用。

于 2013-06-06T13:21:49.480 回答
0

你可以试试 input.ac_input ui-state-error { border: 1px solid #B5B8C8; }

于 2013-06-06T13:33:17.590 回答
-2

尝试添加样式

 #Applications.ui-state-error
于 2013-06-06T13:22:12.007 回答