已为hr标签设置CSS样式但不生效，该如何解决？

你的hr标签样式未生效，是因为浏览器对hr有默认样式（比如自带边框），覆盖了你设置的背景色，同时text-align:center无法让块级的hr居中。以下是修正后的CSS代码：

.hr1{
    border: none; /* 移除浏览器默认的边框，避免覆盖背景色 */
    height: 2px; /* 设置线条高度，让背景色能够显示出来 */
    background-color: violet;
    width: 79%;
    margin: 0 auto; /* 实现hr的水平居中，替代无效的text-align:center */
}
.hr1:hover {
    background-color: blue;
}

关键修改说明： #

• 移除默认边框：浏览器默认会给hr添加灰色的顶部边框，这会遮挡你设置的背景色，所以必须用border: none清空
• 添加高度：hr默认高度可能为0或者被边框占据，设置明确的height才能让背景色显示
• 改用margin居中：text-align:center是控制元素内部文本的对齐方式，对hr这种块级元素的整体居中无效，margin: 0 auto才是块级元素水平居中的正确方式

内容的提问来源于stack exchange，提问作者Melika Ghasemi