覆盖没有！重要的样式 [英] Overriding styles without !important

问题描述

如何覆盖另一个样式表中指定的样式？

How is it possible to override styles specified in another style sheet?

我不想使用！important标记来覆盖它们。我宁愿指定一个新的样式表，把样式放在那里。这可以通过改变样式表的加载顺序来实现？

I do not want to use the !important tag to override them. I would much rather specify a new style sheet, put styles in there. Could this be achieved by changing the load order of the style sheets?

推荐答案

CSS代表层叠样式表，并且有一个特定的样式应用顺序，覆盖以前的样式。没有太多的细节：

It depends. CSS stands for Cascading Style Sheets, and there's a specific order that styles are applied in, overwriting previous styles. Without going into too much detail:

• 如果你的规则有相同的特异性，只需加载你的样式表，一切都会正常。 li>
  
• 如果您的规则具有较高的特异性，则顺序无关紧要。


• 如果您的规则具有较低的特异性，则需要修改它们。

那么，什么是特异性？基本上，它是规则中每个选择器的总和。因此：

So, what's specificity? Basically, it's the sum of each selector in a rule. So this:

a {
    background-color: black;
    color: white;
}

具有较少的特异性：

body a {
    color: orange;
}

。 ID选择器比类选择器具有更高的特异性，其具有与伪类选择器相同的特异性，其具有比标签选择器更高的特异性。因此，如果您的所有内容都包含在< div> 中，并且 id ，您将能够覆盖如下所示的样式：

. ID selectors have higher specificity than class selectors, which have the same specificity as pseudo-class selectors, which have higher specificity than tag selectors. So if all your content is contained in a <div> with an id of content, you would be able to override a style that looks like this:

body a {
    border: 0;
}

使用：

#content a {
    border: 1px solid black;
}

这篇关于覆盖没有！重要的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！