如何更改CSS优先级（不使用重要！）

Question

如果CSS是如下：

input[type="text"] 
{ 
    border: 1px solid green; 
} 

.text 
{ 
    border: 1px solid red ; 
} 

而且如果HTML如下：

<div> 
<input type="text" class="text"/> 
</div>​ 

的文本框的border-color是绿色的。 看来“元素”具有更高的优先级。
如何使.class有效？是否必须使用!important？

还有其他的选择吗？

---

我测试下面的CSS代码：

input[type="text"] 
{ 
    border: 1px solid green; 
} 

input[type="text"] .text 
{ 
    border: 1px solid red; 
} 

HTML代码：

<div> 
    <input type="text" class="text"/> 
</div> 

你猜怎么着

还是绿的？

删除'input [type =“text”] .text'中的空格' 它变成input [type =“text”] .text。 没关系。边框颜色是红色的。

Answer 1

CSS中的C代表级联。你只需要给它更高的优先级，然后再使用其他规则。

input.text 
{ 
    border: 1px solid red ; 
} 

Answer 2

/* Set default border for `text` elements */ 
.text 
{ 
    border: 1px solid red; 
} 

/* Override for input elements */ 
input.text 
{ 
    border: 1px solid green; 
} 

Answer 3

样式按顺序应用，但也必须遵循特异性规则。 .text不如input[type="text"]具体，所以绿色边框“胜利”。如果你使红色边界规则更具体，你可以得到你期待的结果。

试试类似input.text，看看会发生什么。如果那样做不行，你必须得到更具体的。

Answer 4

这是您的选择器的重量问题。

随着

`input[type="text"] 

你传入两个input和[type=text]作为选择，所以你一共经过两个。

随着

.text 

你传入只有一个。这意味着重量更轻，特异性更低，所以第一个选择器胜过第二个。

通过在之前添加input（即input.text），您将为第二种样式增加更多的权重，这将会像您期望的级联样式表一样占上风。

通过如Specificity Calculator这样的网站很容易可视化特异性。