如何覆盖Bootstrap CSS样式? [英] How can I override Bootstrap CSS styles?
问题描述
我需要修改bootstrap.css以适合我的网站.我觉得最好创建一个单独的custom.css文件，而不是直接修改bootstrap.css，原因之一是应该bootstrap.css得到更新，我会尝试重新包含所有修改.我会为这些样式牺牲一些加载时间，但是对于我覆盖的少数样式而言，这可以忽略不计.
I need to modify bootstrap.css to fit my website. I feel it's better to create a separate custom.css file instead of modifying bootstrap.css directly, one reason being that should bootstrap.css get an update, I'll suffer trying to re-include all my modifications. I'll sacrifice some load time for these styles, but it's negligible for the few styles I'm overriding.
为什么我要覆盖bootstrap.css，以便删除锚/类的样式?例如，如果我要删除legend的所有样式规则:
Hw do I override bootstrap.css so that I remove the style of an anchor/class? For example, if I want to remove all the styling rules for legend:
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
我可以删除bootstrap.css中的所有内容，但是如果我对覆盖CSS的最佳做法的理解是正确的，我应该怎么做?
I can just delete all that in bootstrap.css, but if my understanding about best practices on overriding CSS is correct, what should I do instead?
为清楚起见，我想删除所有这些图例样式，并使用父级的CSS值.因此，结合Pranav的答案，我会做以下事情吗?
To be clear, I want to remove all those styles of legend and use parent's CSS values. So combining Pranav's answer, will I be doing the following?
legend {
display: inherit !important;
width: inherit !important;
padding: inherit !important;
margin-bottom: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
border: inherit !important;
border-bottom: inherit !important;
}
(我希望有一种方法可以执行以下操作:)
(I was hoping there's a way to do something like the following:)
legend {
clear: all;
}
推荐答案
使用!important不是一个好的选择，因为将来您很可能希望覆盖自己的样式.这给我们留下了CSS优先事项.
Using !important is not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.
基本上，每个选择器都有自己的数字权重":
Basically, every selector has its own numerical 'weight':
- 100 points for IDs
- 10 points for classes and pseudo-classes
- 1 point for tag selectors and pseudo-elements
- Note: If the element has inline styling that automatically wins (1000 points)
在两种选择器样式浏览器中，浏览器将始终选择权重更大的一种.样式表的顺序仅在优先级均匀时才重要-这就是为什么覆盖Bootstrap并不容易的原因.
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
您的选择是检查Bootstrap源代码，找出如何确切定义某些特定样式，然后复制该选择器，以便您的元素具有相同的优先级.但是我们在这个过程中有点松开了Bootstrap的甜头.
Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority. But we kinda loose all Bootstrap sweetness in the process.
解决此问题的最简单方法是为页面上的一个根元素分配其他任意ID，如下所示:<body id="bootstrap-overrides">
The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">
这样，您可以为任何CSS选择器添加ID前缀，立即为元素添加100磅的重量，并覆盖Bootstrap定义:
This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definitions:
/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
line-height: 1;
color: inherit;
}
/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
}
/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
}
这篇关于如何覆盖Bootstrap CSS样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
