Question

为什么hr标记元素未设置为绿色，如下所示？

＆＃13;

hr {
  background-color: #00ff00;
}

＆＃13;

<hr>

＆＃13;

Answer 1

您提供的代码将正确设置背景颜色。但是，<hr>代码没有可见的背景，因此它似乎无法做任何事情。你可能想要的是改变它的颜色：

hr {
   color: #00ff00;
}

这会使<hr>行变为绿色。

如果它没有，那么可能还有另一个元素specificity更多。在这种情况下，您有许多选择：

1）为hr选择器添加更多特异性。

2）将颜色设置为!important：

hr {
   color: #00ff00 !important;
}

3）设置内联背景颜色：

<hr color="#00ff00" />

希望这有帮助！

Answer 2

背景颜色只是通过应用内联样式设置hr的背景我们可以使它更容易。 https://jsbin.com/wuvolojuzu/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>Hello</p>
  <hr color="red" width="100%" />
  <p>Hi</p>
</body>
</html>

Answer 3

通常，您无法为background-color代码设置hr。这是一个空元素。它必须具有开始标记，但不能有结束标记。 hr仅接受color财产。例如：

<hr color="#00ff00" />

默认hr值：

margin: 7px or 8px /*depend on box-modeling. */
border: 1px inset #000;
display: block;
/* No height */

标准用途：

margin-top: 10px; /* You can change margin height */
margin-bottom: 10px; /* You can change margin height */
border: 0; /* or border-top: 5px solid #00ff00 */
border-width: 5px 0 0 0;
border-style: solid;
border-color: #00ff00;

＆＃13;

hr{
  margin-top: 15px;
  margin-bottom: 15px;
  border: 0;
  border-top: 5px solid #00ff00;
}

＆＃13;

<html>
  <body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <hr />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

＆＃13;

我希望这会有所帮助。

如何在<hr />标签上设置背景颜色？

3 个答案: