为了账号安全,请及时绑定邮箱和手机立即绑定

如何覆盖引导CSS样式?

如何覆盖引导CSS样式?

守候你守候我 2019-07-06 12:56:18
如何覆盖引导CSS样式?我需要修改bootstrap.css适合我的网站。我觉得最好是分开custom.css文件而不是修改bootstrap.css直接原因之一是bootstrap.css得到一个更新,我将痛苦尝试重新-包括我的所有修改。我会为这些样式牺牲一些加载时间,但对于我要覆盖的少数样式来说,这是可以忽略不计的。我要重写吗bootstrap.css所以我移除锚/类的风格?例如,如果我想删除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;}
查看完整描述

3 回答

?
catspeake

TA贡献1111条经验 获得超0个赞

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

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

  • 身份证100分
  • 类和伪类10分
  • 标记选择器和伪元素的1点
  • 注意:如果元素具有内联样式

    自动获胜

    (1000点)

在两种选择器样式中,浏览器总是选择权重较大的样式。样式表的顺序只在优先级相等时才重要-这就是为什么要覆盖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;}


查看完整回答
反对 回复 2019-07-06
?
元芳怎么了

TA贡献1798条经验 获得超7个赞

它应该不会对加载时间产生太大影响,因为您是覆盖基本样式表的部分。

以下是我个人遵循的一些最佳实践:

  1. 始终在基本CSS文件之后加载自定义CSS(不响应)。
  2. 避免使用

    !important

    如果可能的话。它可以覆盖基本CSS文件中的一些重要样式。
  3. 如果不想丢失媒体查询,请始终在custom.css之后加载引导-responsive.css。-必须跟随
  4. 更喜欢修改所需的属性(不是全部)。


查看完整回答
反对 回复 2019-07-06
  • 3 回答
  • 0 关注
  • 859 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信