当它被包裹在 div 中时取消 <hr> 的样式

Question

我有一个 div 包裹着我的 <footer> 标签。在 div 中是一个 <hr>，它需要在 div 中才能应用定位属性。然而，它也继承了我页脚中链接的颜色。我不希望 <hr> 与链接颜色相同。有什么方法可以 "escape" 这个或改变属性。

我尝试了 <hr style="color: black;"> 但这并没有改变任何东西。尽管在 div 中设置了 CSS，但如果您对如何更改属性有任何意见，我将不胜感激。

JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/

HTML

<div id="footer_style">  
<hr>    
<footer>
  <a href="">Contact</a>
  <a href="">Privacy Policy</a>
  <a href="">Create Account</a>
</footer>  
</div>

CSS

#footer_style {
  margin: 0 auto;
  position: fixed;
  bottom:0;
  width: 100%;
  padding: 20px;
}

#footer_style a {
  color: #f2f0e1;
}

#footer_style a:hover {
  color: black;
}

Answer 1

hr 标签只是简单地应用了一个 border-top

如下覆盖 hr

#footer_style hr {
  border-top: 1px solid black;
}

Answer 2

#footer_style hr {
   background-color: black;
   height:1px;
}

JSFiddle

Answer 3

哇，这让我挣扎了一分钟。显然因为 hr 没有高度，你看不到它的内部 "fill"，影响颜色没有任何作用。

您实际看到的是边框，所以使用 border-color 帮我做到了。

Answer 4

请尝试下面的代码我已经尝试过这段代码。使用此代码可以解决您的问题。

  border-color: red;

Answer 5

改为使用颜色：黑色；

试试这样使用

border: 1px solid #000;
border-width: 1px 0px 0px 0px;

Try it

当它被包裹在 div 中时取消 <hr> 的样式

Unstyling <hr> when it's wrapped in a div

html

css

footer