css - 为什么这个 css 成为先例？

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;
}

无论如何我可以向文本框添加一个类“ui-state-error”并让该边框 css 覆盖 input[type="text"] 边框 css。

我想因为它在我的 css 下方，所以它会胜过上方？

Answer 1

CSS 规则的后续排序“胜过”当(且仅当)选择器具有相同 Selector Specificity .

A selector's specificity is calculated as follows:

1. count the number of ID selectors in the selector (= a)
2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
3. count the number of type selectors and pseudo-elements in the selector (= c)
4. ignore the universal selector

在这种情况下，特异性是

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