WordPress博客无需手动加类 为单篇文章内不同<hr>设置独立CSS样式

解决方案 #

你之前用到的:nth-child选择器是按照父元素下所有子元素的整体顺序计数，不区分标签类型，很容易受到其他内容元素（段落、标题等）的干扰，也容易出现跨文章计数的问题。这里给你两个不需要手动加类名的实现方案：

方案1：兄弟选择器实现（更稳定，推荐）

利用CSS后续兄弟选择器~，天然只会匹配同一父容器（也就是单篇文章的.entry-content）内，前面已经存在hr元素的hr标签，也就是自动命中单篇文章内第二个及之后的分隔线，完全不会跨文章串样式：

/* 基础样式保持不变 */
.entry-content hr {
  overflow: visible;  
  padding: 0;
  border: none;
  border: 10px solid #74eda7;
  border-radius: 8px;
  color: green;
  text-align: center;
}

/* 默认所有hr使用第一个分隔线的样式 */
.entry-content hr:after {
  content: "↓ INSPIRE ↓"; 
  display: inline-block;
  position: relative;
  top: -0.8em;
  font-size: 1.2em;
  padding: 0 0.25em;
  background: white;
}

/* 匹配单篇文章内第二个及之后的hr，替换样式 */
.entry-content hr ~ hr:after {
  content: "↓ inspire 2X ↓";
}

这个方案兼容性极强，支持IE9及以上所有现代浏览器，也完全不受hr前后其他内容元素的影响。

方案2：:nth-of-type实现

如果你后续需要给第三、第四个hr做单独样式，可以用:nth-of-type选择器，它只会统计同一父容器下同标签元素的顺序，每个.entry-content容器会独立计数，不会跨文章生效：

/* 单篇文章内第一个hr */
.entry-content hr:nth-of-type(1):after {
  content: "↓ INSPIRE ↓";
}
/* 单篇文章内第二个hr */
.entry-content hr:nth-of-type(2):after {
  content: "↓ inspire 2X ↓";
}

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