如何更改CSS优先级(不要使用！important)

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>

猜猜是什么？

仍然绿色。

删除'输入[type =" text"] .Text'中的空间它成为输入[type =" 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.text）之前添加 input，您将为第二样式添加更多的重量，这将占上风，就像您从级联样式表中所期望的那样。

特异性很容易通过特异性计算器等网站可视化。