【发布时间】：2021-10-16 01:21:09
【问题描述】：
我一直在尝试构建一个包含外部 SCSS 文件的页面。直到现在，我用 !important 覆盖特定元素都没有问题。我知道这个问题在这里很受欢迎。我经历过
这个答案 How to override external css marked as !important?,
这个 How to override external css?
这个 How to overwrite SCSS variables when compiling to CSS
还有其他一些，但它们似乎都不适合我的情况。
我的目标是通过 CSS @keyframe 计时器（或任何其他可行的方法）设置我的框的颜色更改，但是在外部 SCSS 文件中有一个颜色规则设置为 !important 。 我还可以通过在我的本地 css 中添加一个 !important 来覆盖它一次，以获得我想要的基本颜色，但是颜色更改似乎不起作用并且无法覆盖这两个 !important s，即使使用更高特异性等等。 我将提供对这个问题很重要的代码部分：
主题风格：
<link rel="stylesheet" href="box2.css">
<link rel="stylesheet" href="http://shipping.mambo.com.br/shipping-store/views/_includes/dist/css/adminlte.min.css">
我正在使用的盒子：
<div href="#" id="boxMaster" class="small-box bg-info" class="box-PEDIDO" tabindex="0">
<a class="nmroPedido small-box-header" id="header" href="#"></a> <a class="float-right" id="dataEntrega"></a>
<hr>
<div class="inner">
<p id="nomeproduto"></p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart" id="carrinho"></i>
</div>
<hr id="footer" class="baixoHr" tabindex="-1">
<a class="small-box-footer" tabindex="-1">
</a>
</div>
还有我的本地 CSS：
.row .info-box .info-box-icon {
font-size: 20px;
cursor: pointer;
height: 115px;
width: 30px;
}
.box-PEDIDO {
height: 135px;
width: 423px;
cursor: pointer;
}
.card-title {
font-weight: bolder;
}
.row {
height: max-content;
}
hr#antigo {
border: 0;
height: 25px;
background: #333;
background-image: linear-gradient(to right, #ccc, rgb(0, 0, 0), #ccc);
}
/* NOVO */
body #preparando .small-box {
width: 423px;
height: 160px;
cursor: pointer;
margin-right: 11px;
}
html body div #preparando .small-box {
background-color: var(--bs-success) !important;
}
#preparando:focus-within .small-box:focus-within {
background-color: #29923f !important;
}
#prontos .small-box {
width: 423px !important;
height: 160px !important;
cursor: pointer;
margin-right: 11px;
background-color: var(--bs-dark) !important;
}
.small-box-footer {
position: absolute !important;
bottom: 0px;
width: 423px !important;
text-align: right !important;
margin-right: 5px !important;
font-size: 13px;
font-weight: 250 !important;
background: none !important;
cursor: default;
}
h3 {
font-size: 1.2rem !important;
font-weight: lighter !important;
}
.h3qtd {
position: relative;
margin-top: -37px !important;
margin-left: 10px !important;
}
p {
font-size: 1.3rem !important;
word-wrap: break-word;
height: 90px;
margin-top: 4px !important;
position: absolute;top: 65px;
width: 250px;
line-height: 27px;
margin-left: 12px;
font-weight:500;
}
.inner {
height: 42px;
margin-top: -30px; /*Altura da "quantidade", ajustar dps*/
}
#header {
font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 11px;
margin-left: 5px;
padding: 8px 0;
height: 20px;
font-weight: 200;
display: inline-block;
}
#dataEntrega {
font-size: 13px;
margin-top: 4px;
margin-right: 5px;
}
.small-box .icon > i {
position:absolute; top: 50px !important;
}
hr {
position: relative; bottom: -9px !important;
width: 423px !important;
}
.baixoHr {
position: relative; top: 74px;
}
.nroPedHead {
display: inline-block;
position: relative;
}
.nmroPedido-0 {
margin-top: -72px !important;
position: absolute !important;
margin-left: 5px;
font-size: 0.75rem;
}
.float-right {
margin-top: -71px;
margin-right: 5px;
font-size: 13px;
}
#preparando div .small-box .bginfo {
animation: change 10s step-end both !important;
}
@keyframes change {
to { background-color: var(--bs-warning) !important }
}
重要部分在html body div #preparando .small-box { background-color: var(--bs-success) !important; } 中（即使没有所有规范也可以工作）
还有最底层
#preparando div .small-box .bginfo {
animation: change 10s step-end both !important;
}
@keyframes change {
to { background-color: var(--bs-warning) !important }
}
注意：颜色更改关键帧适用于页面中的其他元素，但无法更改框的颜色。
我怎样才能让它工作？提前谢谢你。
编辑： MRadev 的回答确实有效并触发了颜色变化，每个元素 BUT .bg-info （这是框的背景），因为 !important 在外部 CSS我相信的文件。
仍在尝试找到解决此问题的方法。 将 MRadev 的线条设置为每个元素将不起作用，因为 .bg-info 背景中剩余的绿色会渗入元素的颜色。
【问题讨论】：
标签： javascript html css sass