CSS 修改hr标签的颜色

在本文中，我们将介绍如何使用CSS来修改hr标签的颜色。

阅读更多：CSS 教程

使用CSS属性来改变颜色

我们可以使用CSS的属性来改变hr标签的颜色。有几个常用的属性可以实现这个效果。

1. background-color属性

我们可以使用background-color属性来改变hr标签的背景颜色。例如，我们可以将hr标签的背景颜色设置为红色：

hr {
  background-color: red;
}

这样，所有的hr标签都将显示为红色的背景。

2. border-color属性

border-color属性可以改变hr标签的边框颜色。例如，我们可以将hr标签的边框颜色设置为蓝色：

hr {
  border-color: blue;
}

这样，hr标签的边框颜色将变为蓝色。

3. color属性

color属性可以改变hr标签内部文本的颜色。然而，由于hr标签是一个水平线，没有实际的文本内容，所以color属性对hr标签没有实际效果。

使用CSS选择器来设置特定的hr标签的颜色

除了使用属性来改变所有hr标签的颜色外，我们还可以使用CSS选择器来设置特定的hr标签的颜色。

1. 使用类选择器

我们可以给特定的hr标签添加一个类，并通过类选择器来改变这些hr标签的颜色。例如，我们可以给某个hr标签添加一个名为”highlight”的类，并将其背景颜色设置为黄色：

<hr class="highlight">

hr.highlight {
  background-color: yellow;
}

这样，具有”highlight”类的hr标签的背景颜色将变为黄色。

2. 使用ID选择器

与类选择器类似，我们还可以给特定的hr标签添加一个ID，并通过ID选择器来改变这个hr标签的颜色。例如，我们可以给某个hr标签添加一个ID”mainline”，并将其边框颜色设置为绿色：

<hr id="mainline">

hr#mainline {
  border-color: green;
}

这样，具有”mainline” ID的hr标签的边框颜色将变为绿色。

示例：改变hr标签的颜色

下面是一个示例，将先使用属性改变所有hr标签的颜色，再使用类选择器和ID选择器分别改变指定hr标签的颜色。

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 使用属性改变所有hr标签的颜色 */
      hr {
        background-color: red;
      }

      /* 使用类选择器改变指定hr标签的颜色 */
      .highlight {
        background-color: yellow;
      }

      /* 使用ID选择器改变指定hr标签的颜色 */
      #mainline {
        border-color: green;
      }
    </style>
  </head>
  <body>
    <hr>
    <hr class="highlight">
    <hr id="mainline">
  </body>
</html>

以上示例中，第一个hr标签的背景颜色将变为红色，第二个hr标签的背景颜色将变为黄色，而第三个hr标签的边框颜色将变为绿色。