css - 如何更改 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>

你猜怎么着？</p>

还是绿色。

删除 '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

这是选择器的重量问题。

和

`input[type="text"]

您同时传递input和[type=text]作为选择器，因此您总共传递了两个。

和

.text 

你只通过了一个。这意味着更少的权重和更少的特异性，所以第一个选择器胜过第二个。

通过input在之前添加（即 input.text），您为第二种样式添加了更多权重，正如您对级联样式表所期望的那样，这将占上风。

特异性可以通过特异性计算器等网站轻松可视化。

Answer 4

样式是按顺序应用的，但也必须遵循特定规则。的.text具体程度低于input[type="text"]，因此绿色边框“获胜”。如果您使红色边框规则更具体，您可以获得您似乎期望的结果。

尝试类似的东西input.text，看看会发生什么。如果那不这样做，你将不得不变得更具体。