如何覆盖引导CSS样式？
如何覆盖引导CSS样式？
bootstrap.csscustom.cssbootstrap.cssbootstrap.css
bootstrap.csslegend:
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
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;}
守候你守候我浏览 860回答 3
3回答
-
catspeake
使用!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;} -
元芳怎么了
它应该不会对加载时间产生太大影响，因为您是覆盖基本样式表的部分。以下是我个人遵循的一些最佳实践：始终在基本CSS文件之后加载自定义CSS(不响应)。避免使用!important如果可能的话。它可以覆盖基本CSS文件中的一些重要样式。如果不想丢失媒体查询，请始终在custom.css之后加载引导-responsive.css。-必须跟随更喜欢修改所需的属性(不是全部)。
随时随地看视频慕课网APP
Html/CSS