twitter-bootstrap 如何从父类中删除和覆盖 CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21026775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove and override CSS attribute from parent class?
提问by
I have a file bootstrap.min.css which has the following class
我有一个文件 bootstrap.min.css 有以下类
.nav-tabs {
border-bottom: 1px solid #ddd;
font-size:14px;
}
I created a new css nav-tabs.css which has
我创建了一个新的 css nav-tabs.css，它有
.nav-tabs {
font-size:18px!important;
}
How do I remove the font-size from parent if the requirements change in the future?
如果将来需求发生变化，如何从父级中删除字体大小？
采纳答案by apaul
Don't use !importantunless you really, really have to.
!important除非你真的，真的必须，否则不要使用。
You can change the font size in this case by either adding the new css after the old like so:
在这种情况下，您可以通过在旧的 css 之后添加新的 css 来更改字体大小，如下所示：
.nav-tabs {
border-bottom: 1px solid #ddd;
font-size:14px; /*old*/
}
.nav-tabs {
font-size:18px; /*new*/
}
Likewise using two style sheets the same will apply:
同样使用两个样式表同样适用：
<link href="/bootstrap.css" rel="stylesheet"> //old
<link href="/Your_Custom_CSS.css" rel="stylesheet"> //new
or probably preferably by being a little more specific in the selector like so:
或者可能最好在选择器中更具体一点，如下所示：
.nav-tabs { /*less specific*/
border-bottom: 1px solid #ddd;
font-size:14px;
}
.nav-tabs li { /*more specific, li is just an example*/
font-size:18px;
}
回答by tzi
The !importantdeclaration is not mandatory.
该!important声明不是强制性的。
There is other ways to override a CSS rule.
还有其他方法可以覆盖 CSS 规则。
1. Selector specificity
1. 选择器特异性
The browsers calculate a specificity for every selector with a group of 3 different counters. Each counter is infinitely greater than the next one:
浏览器使用一组 3 个不同的计数器计算每个选择器的特异性。每个计数器都无限大于下一个：
- IDs;
- Classes, pseudo-classes & attributes;
- Elements & pseudo-elements.
- 身件；
- 类、伪类和属性；
- 元素和伪元素。
Some examples of selectors increasingly specific:
一些选择器越来越具体的例子：
a { } /* 0,0,1 is lower than */
.button { } /* 0,1,0 is lower than */
input[type="submit"] {} /* 0,1,1 is lower than */
#header {} /* 1,0,0 is lower than */
#header a {} /* 1,0,1 is lower than */
#header a:hover {} /* 1,1,1 is lower than */
#header a:hover::after {} /* 1,1,2 */
If a selector has a lower specificity than another one, its rules will be overrided.
如果一个选择器的特异性低于另一个选择器，它的规则将被覆盖。
In your case, the two rules have the same specificity.
在您的情况下，这两个规则具有相同的特异性。
2. Order
2. 订购
If two rules have the same specificity, the one loaded last win. It could be in the same file, the one at the bottom win, or in two different files, the file at the bottom of the HTML file win.
如果两条规则具有相同的特殊性，则最后加载的规则获胜。它可以在同一个文件中，位于底部的那个获胜，或者在两个不同的文件中，位于 HTML 文件底部的文件获胜。
So if you want to override the bootstrap rules, you have to make that your rules have the same weight and that your stylesheet is loaded after the one of bootstrap:
因此，如果您想覆盖引导程序规则，您必须使您的规则具有相同的权重，并且您的样式表在引导程序之一之后加载：
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="nav-tab.min.css">
I hope the explanations will be useful.
我希望这些解释会有用。
Cheers, Thomas.
干杯，托马斯。
回答by Mr. Alien
Instead of using !importantwhich is a dirty way to do so, use a more specific selector like
与其使用!importantwhich 是一种肮脏的方式，不如使用更具体的选择器，例如
div.class_name .nav-tabs { /* More specific selector */
/* Styles */
}
The above selector will target .nav-tabsnested inside a divhaving classclass_name, so this makes it unique, as well as it will override the properties in .nav-tabs(Yes, you need to re declare the properties again, else if yo don't, other properties will be picked from .nav-tabs)
上面的选择器将目标.nav-tabs嵌套在 adiv中classclass_name，因此这使它独一无二，并且它将覆盖中的属性.nav-tabs（是的，您需要再次重新声明属性，否则，如果不这样做，将从中选择其他属性.nav-tabs)
回答by Mike
it looks like you have 2 css files either edit the bootstrap one to your liking or have the one that you want to override the other above the other one in the <head>like so
看起来您有 2 个 css 文件，可以根据自己的喜好编辑引导程序中的一个文件，也可以将其中一个文件覆盖在另一个文件之上，<head>例如
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="nav-tabs.css"/>
