在父标记中覆盖CSS继承
[英]Overriding CSS inheritance in parent tag
问题描述
I have HTML and CSS as : 
我有HTML和CSS：
body { width: 100%; height: 100%; font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background-color: #000; font-weight: 300; } hr { display: block; background-color: #FFF!important; color: #0F0!important; }
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <hr> </body>
When i run the code, the hr tag inherits the body tag style. 当我运行代码时， hr标签会继承body标签样式。 Hence, the back-ground color surrounding the hr element is black #000 instead of white #FFF. 因此， hr元素周围的背景色是黑色＃000而不是白色#FFF。
How do i override this background-color property being inherited from the body style tag? 如何覆盖从body样式标签继承的background-color属性？
2 个解决方案
解决方案1
1 已采纳 2017-07-15 09:52:16
Actually the <hr> tag is not inheriting anything. 实际上， <hr>标签没有继承任何东西。 It is just a border with border-style: inset . 这仅仅是一个border与border-style: inset 。 It has no content only a border, hence background-color or color does not mean anything to it. 它仅具有边框就没有内容，因此background-color或color没有任何意义。 You can increase the border-width and see the colors more clearly. 您可以增加border-width并更清楚地看到颜色。
In the snippet I have reproduced the same <hr> tags in two different backgrounds. 在代码段中，我在两个不同的背景中复制了相同的<hr>标签。 You can see that both are the same. 您可以看到两者相同。
If you want to add colors and other attributes, you should use a <div> with the required attributes instead. 如果要添加颜色和其他属性，则应使用带有必需属性的<div> 。
#page-top { width: 100%; height: 80px; font-family: Open Sans, "Helvetica Neue", Helvetica, Arial; color: #fff; background-color: #000; font-weight: 300; border: 1px solid red; } #page-bottom { width: 100%; height: 80px; font-family: Open Sans, "Helvetica Neue", Helvetica, Arial; color: #000; background-color: #fff; font-weight: 300; border: 1px solid red; } hr { vertical-align: middle; display: block; background-color: #FFF!important; color: #0F0!important; border-width: 10px; } #proper { width: 100%; height: 80px; color: #fff; background-color: #000; border: 1px solid red; } .horizontal-rule { border: 2px solid blue; border-style: inset; }
<div id="page-top"> Black BG <br> <hr> </div> <div id="page-bottom"> White BG <br> <hr> </div> <div id="proper"> Using a div instead of hr <br><br> <div class="horizontal-rule"></div> </div>
解决方案2
0 2017-07-15 09:42:05
try this 尝试这个
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid blue;
margin: 1em 0;
padding: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.