Question

我有一个文本框，我添加了一个类（ui-state-error）来添加边框颜色：＃CD0A0A但它不起作用。我意识到其他一些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 {
     background: url("images/ui-bg_glass_95_fef1ec_1x400.png") repeat-x scroll 50% 50% #FEF1EC;
   border: 1px solid #CD0A0A;
   color: #CD0A0A;
}

无论如何我可以添加一个类＆＃34; ui-state-error＆＃34;到文本框并让边框css覆盖输入[type =＆＃34; text＆＃34;] border css。

我想，因为它在我的css下面会胜过上面的那个？

Answer 1

CSS规则的后续排序＆＃34;胜过＆＃34; 当（仅当）时，选择器的相同 Selector Specificity。

选择器的特异性计算如下：


计算选择器中的ID选择器数量（= a）

计算选择器中的类选择器，属性选择器和伪类的数量（= b）

计算选择器中的类型选择器和伪元素的数量（= c）

忽略通用选择器

在这种情况下，特异性是

input[type="text"]   -> a=0 b=1 c=1 -> 11  --winner, order doesn't matter
.ui-state-error      -> a=0 b=1 c=0 -> 10

现在，如果后一个选择器规则还包含一个类型选择器

input[type="text"]   -> a=0 b=1 c=1 -> 11 
input.ui-state-error -> a=0 b=1 c=1 -> 11  --winner, by ordering override

Answer 2

您的第二个CSS规则更具体地说是您的第一个CSS规则。

你可以

将!important添加到第一个，这通常是一个坏主意，或
使其更具体。

赞扬和其他答案表明textarea.some-class可能有用，但更好，你可以试试：

.parents-class textarea.some-class {...}

您获得的具体内容越多，您的规则被忽略的可能性就越小。

Answer 3

有两种方法：

在要应用于输入的属性后添加！important 例如：border: 1px solid #CD0A0A !important; color: #CD0A0A !important;
使用id（在css中具有高优先级）。例如：#ui_error，.ui-state-error，.ui-widget-content ...

并且输入将是这样的

<input type="text" id="ui_error">

为什么这个css先例？

3 个答案: