个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这就是 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: " "; 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: " "; 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: " "; 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: " "; 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: " "; 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: " "; 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直接，所以我添加了一个 CSS class叫toolbar看起来像
.toolbar {
background-color: #37517e;
color: #ffffff;
}
从div可以看出上面的代码。然而，背景颜色来自 .toolbar被忽略，并且来自 style 的那个被申请;被应用。我在DevTools中确认了这一点
如何应用我选择的颜色？
最佳答案
在 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>关于html - 如何覆盖 div 样式 :background-color with class?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46005942/
24
4
0
我只想知道它们之间的区别: .class .class{ font-size:14px; } 对比: .class > .class{ font-size:14px; } 是一样的东西吗？ 最佳答案
PrimeFaces 文档的以下摘录使标题中描述的两个选择器之间似乎存在差异: .ui-widget, .ui-widget .ui-widget { font-size: 90% !imp
我正在尝试选择特定值。但我遇到了一个问题。 我有两个元素，一个有 X Y，另一个有 X Y Z。 当选择 X Y Z 时，我也收到 X Y 的值...有没有办法让它寻找 X AND Y AND Z 而
.class.class 和 .class .class 有什么区别？ 最佳答案 .class .class 匹配类 .class 的任何元素，这些元素是类 .class< 的另一个元素的后代/. .
我正在研究 Classname.class 和 Classname.class.toString() 并发现了一些不寻常的东西。 .class 在同一个类上运行时似乎等同于 .class。尽管 .cl
我试图在Dart中扩展列表并在此列表中使用另一个类。 这是我的示例，其中注释出了问题: import "Radio.dart"; // extends ListBase { List ra
我有一个很大的“经理”类，我认为它做得太多了，但我不确定如何将它划分为更多逻辑单元。 一般来说类主要由以下方法组成: class FooBarManager{ GetFooEntities();
我在一个文件中定义了一个抽象父类(super class)，在另一个文件中定义了一个子类。我需要父类(super class)文件和堆栈跟踪报告来找到一个包含它。 但是，当它到达“extends”行时
我在 A. Alexenderscu 的现代 C++ 设计中找到了一些模板示例 作者使用以下行的地方 template class CheckingPolicy // class SmartPt
看一下这段代码: public static class A { public void doA() { } } public static class B extends A {
我有两个具有 .body 类的 div，但是，一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
我一定是遗漏了 C++ 规范中的某些内容，因为我无法解释为什么以下代码可以成功编译: class MyClass { static void fun(); }; int main() { MyClas
我正在尝试在 python 中“模拟”命名空间。我使用内部和外部类层次结构来创建我的命名空间。例如，您希望将文件(如资源)的路径保存在一个位置。我试过这样的事情: src = #path to sou
在试验 online crystal compiler 时(这太棒了)，我遇到了一个我似乎无法找到解释的错误: class Person class Current < self end
在查看我的一段代码时，我陷入了如下的一条语句。 TMyObjectClass = TMyObject 类； 我有点困惑，不知道这句话是什么意思。由于 TMyObjectClass 在该语句上方没有声明
我正在编写一个简单的应用程序，以学习一些基本的Dart编程，但无法弄清楚其结构和包含的内容-我得到了一个重复的类Point 首先，我有一个叫做MouseTrack的主类。它将初始化列表并产生循环。 #
在 org.springframework.core.SerializableTypeWrapper (版本 5.2.3)，第 112 行有以下代码: if (GraalDetector.in
我希望将鼠标悬停在子导航中的列表项上，以激活页面上该类别中所有项的类(不仅仅是父元素或同级元素)。有任何想法吗？这是我的意思的一个例子: img.BLUE {border:1px solid #FF
我正在通过 ClassLoader 加载类: Class clazz = urlClassLoader.loadClass(name.substring(0, name.length() - 6).r
以下简化的类在从 get() 返回值时执行不同的操作，具体取决于该类是被赋予 double 值还是数组作为模板参数: #include "array" #include "type_traits" t
我是一名优秀的程序员,十分优秀！