相同CSS样式的两个hr标签仅第一条生效 第二条不显示如何解决

问题原因&解决方法 #

你写的hr基础CSS规则本身没有语法错误，两个hr显示效果存在差异大概率是受页面其他样式规则或者布局问题影响，按优先级从高到低排查即可：

• 首先排查颜色重叠问题
  你设置的hr颜色#EAF6F6是极浅的冷白色调，检查第二个hr所处的.skills模块底部/contact-me模块顶部区域的背景色，是不是刚好和该颜色重合，导致hr“隐身”。你可以临时把hr的border-top颜色改为高对比度色值比如#ff0000测试，如果修改后第二个hr正常显示，直接调整hr颜色或者对应区域的背景色即可。
• 其次排查浮动导致的高度塌陷问题
  从代码可以看到你skill-row内的img设置了专属类名，大概率你给这两个图片设置了float: left/right实现图文并排效果，如果没有给父级.skill-row做清除浮动处理，会导致整个.skills模块高度计算异常，后续的hr会被挤压到和.skills模块重叠的不可见位置。
  解决方法：给.skill-row添加清除浮动规则即可：

  .skill-row::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 最后排查样式覆盖问题
  按F12打开浏览器开发者工具，用元素选择器选中第二个hr，查看「计算样式」面板，确认display属性为block、border-top、width属性和你写的规则一致，没有被其他更高优先级的CSS规则（比如:nth-child选择器、后代选择器）覆盖，如果存在覆盖调整对应CSS的优先级即可。

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