Question

我有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>

当我运行代码时，hr标记会继承body标记样式。因此，hr元素周围的背景颜色是黑色＃000而不是白色#FFF。

如何覆盖从background-color样式标记继承的body属性？

Answer 1

实际上<hr>标签不会继承任何内容。这只是border border-style: inset。它没有内容只有边框，因此background-color或color对它没有任何意义。您可以增加border-width并更清楚地查看颜色。

在我的代码片段中，我在两个不同的背景下复制了相同的<hr>标签。你可以看到两者都是一样的。

如果要添加颜色和其他属性，则应使用带有所需属性的<div>。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个

hr {
 display: block;
 height: 1px;
 border: 0;
 border-top: 1px solid blue;
 margin: 1em 0;
 padding: 0; 
}

覆盖父标记中的CSS继承

2 个答案: