如何覆盖 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 分
- 类和伪类 10 分
- 1 分用于标记选择器和伪元素
- 注意:如果元素具有内联样式自动获胜 (1000点)
- 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屋！
