gpt4 book ai didi

html - 如何覆盖 Bootstrap CSS 样式?

转载 作者:IT老高 更新时间:2023-10-28 11:05:00 25 4
gpt4 key购买 nike

我需要修改 bootstrap.css 以适应我的网站。我觉得创建一个单独的 custom.css 文件而不是直接修改 bootstrap.css 更好,一个原因是应该 bootstrap.css 得到更新后,我将尝试重新包含我的所有修改。我会为这些样式牺牲一些加载时间,但对于我要覆盖的少数样式来说,这可以忽略不计。

我该如何覆盖 bootstrap.css 以便删除 anchor /类的样式?例如,如果我想删除 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 的最佳实践的理解是正确的,我应该怎么做?

明确地说,我想删除所有这些图例样式并使用父级的 CSS 值。那么结合 Pranav 的回答,我会做以下事情吗?

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;
}

(我希望有一种方法可以执行以下操作:)

legend {
clear: all;
}

最佳答案

使用 !important不是一个好的选择,因为您将来很可能希望覆盖自己的样式。这给我们留下了 CSS 优先级。

基本上,每个选择器都有自己的数字“权重”:

  • ID 100 分
  • 类和伪类 10 分
  • 标签选择器和伪元素 1 分
  • 注意:如果元素具有内联样式that automatically wins (1000 分)

在两种选择器样式中,浏览器总是会选择权重更大的一种。样式表的顺序只有在优先级相等时才重要——这就是为什么要覆盖 Bootstrap 并不容易。

您的选择是检查 Bootstrap 源,找出某些特定样式是如何定义的,然后复制该选择器,以便您的元素具有相同的优先级。但是在这个过程中我们有点失去了所有 Bootstrap 的甜头。

解决此问题的最简单方法是为页面上的根元素之一分配额外的任意 ID,如下所示:<body id="bootstrap-overrides">

这样,您可以在任何 CSS 选择器前加上您的 ID,立即为元素添加 100 点权重,并覆盖 Bootstrap 定义:

/* 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;
}

关于html - 如何覆盖 Bootstrap CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20721248/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com