如何用类覆盖 div 样式：背景颜色？ [复制]

Question

这是当前 div 的样子

<div class="toolbar" style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232); height: 56px; padding: 0px 24px; display: flex; justify-content: space-between;"><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL CLIENTS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 25 --><!-- react-empty: 26 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL VERTICALS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 39 --><!-- react-empty: 40 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL INSTANCES</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 53 --><!-- react-empty: 54 --></div></div></div></div>

如您所见，style 属性将background-color 属性设置为

style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232); 

但是，我想要一个不同的颜色，我不能直接更改这个div，所以我添加了一个名为toolbar 的CSS class，看起来像

.toolbar {
    background-color: #37517e;
    color: #ffffff;
}

这可以从上面的div 代码中看出。但是，.toolbar 的背景颜色被忽略，style 的背景颜色被应用。我在DevTools 中确认了这一点

如何应用我选择的颜色？

Answer 1

在 css 属性中使用 !important

.toolbar {
    background-color: #37517e!important;
    color: #ffffff;
}

.rowTest{
 background-color:pink!important;
}

<div style="background-color:green;width:100%;height:50px;" class="rowTest"><div>

Answer 2

使用class 覆盖内联style 属性的唯一方法是使用!important keyword：

.toolbar {
    background-color: #37517e !important;
    color: #ffffff;
}

这是一个工作示例：

div.cls {
  color: blue !important;
}

<div style="color: red;" class="cls">This text should be red, but it's not</div>

Answer 3

使用!important 标签。这会覆盖其他可能适用的 CSS 规则。也就是说——不鼓励在 HTML 中的 style 标记中使用大量样式。我会将此信息添加到您的样式表中，并将其与 div 和类相关联。这使您可以更好地可视化规则的级联性质...最新的规则适用于元素。