Bootstrap 4 - Reboot.scss 覆盖 Global.scss
Ben*_*Ben 9 css sass bootstrap-4
我正在使用Sage Starter Theme并且我正在添加一些 CSS 来设置_global.scss文件中的全局链接样式。一些 CSS 属性被 Bootstrap 覆盖，来自文件_reboot.scss。
_global.scss
这种样式为我的所有链接添加了悬停效果的基本下划线。
a {
font-family: $font__lato !important;
text-decoration: none;
color: brown;
position: relative;
overflow: hidden;
&:focus {
outline: none;
}
&:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: red;
height: 2px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
&:hover:after,
&:focus:after,
&:active:after {
left: 0;
right: auto;
width: 100%;
}
}
_reboot.scss
如下图所示，_reboot.scss优先于我自己的 CSS。
在text-decoration: none;不使用!important或编辑_reboot.scss的情况下应用我自己的样式的正确方法是什么直接？
谢谢您的帮助。
小智 15
您需要确保样式表链接到 html 文件的最后，以便它级联 _reboot.scss。
例如你会这样做：
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
而不是最后链接引导程序，以便您的级联引导程序
- 我有同样的问题，这并不能解决它。 (2认同)
您需要使用特殊性或自然级联来覆盖 Bootstrap 中的样式，这就是许多人远离这些单体框架的原因之一，因为在必须覆盖 Bootstrap 中的所有内容时创建自定义样式需要很长时间。
例如，您可以使用：
body > div > a {
text-decoration: none;
}
这可能足以覆盖 Bootstrap 声明。
否则，如果您可以对样式重新排序，那么根据声明的特殊性，它可能会或可能不足以在级联中占据优先级。
不要使用 !important，当您需要为链接添加更多样式并发现唯一的方法是添加更多 !important 时，它会导致更多问题。
查看有关如何计算特异性的更多信息： https : //www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/