Question

如果css如下：

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

.text
{
     border: 1px solid red ; 
}

如果html如下：

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

文本框的border-color为绿色。似乎＆＃34;元素＆＃34;优先级较高。
如何使.class有效？是否必须使用!important？

还有其他选择吗？

我测试了下面的CSS代码：

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

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

HTML code：

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

猜猜是什么？

仍然是绿色。

删除＆＃39;输入中的空格[type =＆＃34; text＆＃34;]。text＆＃39; 它变成输入[type =＆＃34; text＆＃34;]。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等网站可以轻松查看特异性。

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

4 个答案: