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

vxf3dgd4 于 2023-06-07 发布在其他

关注(0)|答案(4)|浏览(156)

如果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。没关系。边框是红色的。

css

来源：https://stackoverflow.com/questions/13964052/how-to-change-css-priority-dont-use-important

4条答案

按热度按时间

plicqrtu1#

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

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

赞(0）回复(0）举报 2023-06-07

uqzxnwby2#

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

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

赞(0）回复(0）举报 2023-06-07

2w3rbyxf3#

样式是按顺序应用的，但也必须遵循 * 特异性 * 规则。.text比input[type="text"]更不具体，所以绿色边框“获胜”。如果您使红色边框规则更具体，则可以获得您似乎期望的结果。
试试input.text，看看会发生什么。如果这还不行，你就得说得更具体些。

赞(0）回复(0）举报 2023-06-07

j8yoct9x4#

这是你的选择器的重量问题。
与

input[type="text"]

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

.text

你只超过了一个。这意味着更少的权重和更少的特异性，因此第一个选择器胜过第二个选择器。
通过将input添加到之前（即文本），您正在为第二种样式添加更多权重，这将像您期望的那样从级联样式表中获得优势。
通过像Specificity Calculator这样的网站可以很容易地看到具体情况。

赞(0）回复(0）举报 2023-06-07

我来回答

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

4条答案

相关问题

热门标签

最新问答