为相同的 <hr> 元素应用 CSS 中的两个类但未指定它们

Question

在我的 Wordress 博客上，我经常在博客 post 中使用 <hr>。在其他 post 中，我每个 post 使用两个 <hr> - 而在其他 <hr> 中，我不使用 <hr>.

现在我的 CSS:

.entry-content hr {
  overflow: visible;  
  padding: 0;
  border: none;
  border: 10px solid #74eda7;
  border-radius: 8px;
  color: green;
  text-align: center;
  }

.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> 添加到博客 post 然后我想应用一组新的属性，否则效果很好。

有什么我可以添加的，以便任何一个博客 post 中 <hr> 的第二个实例具有一组全新的属性。

像这样的东西有效：

.entry-content hr:nth-child(odd):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-child(even):after {
content: "↓ INSPIRE ↓";
}

除了当我每页有多个博客 post 时，奇数和偶数使得 post 之间不一致。第一个 <hr> 应该说“Inspire”，任何博客上的第二个 post 应该说“inspire 2x”，一个网页总共最多可以有 7 个博客 post。

我不想在每个博客中手动开始添加 class 个名字 post。

如有任何帮助，我们将不胜感激。

Answer 1

试试这个方法

.entry-content hr:after {
  content: "↓ inspire 2X ↓";
}

.entry-content hr + hr:after {
  content: "↓ INSPIRE ↓";
}

Answer 2

您可以通过属性 select CSS 中的元素，在这种情况下，您可以通过以特定字符串开头的属性 select。

此片段 selects by id 以 post-

开头的文章

.entry-content article hr:nth-child(odd)::after {
  content: "↓ inspire 2X ↓";
  z-index: 1;
}

.entry-content article[id^="post-"] hr:nth-child(even)::after {
  content: "↓ INSPIRE ↓";
}

<div class="entry-content">
  POST 19324:<br>
  <article id="post-19324" class="post-19324 post type-post status-publish format-standard">
    <hr>post 19324 has two hrs
    <hr>
  </article>
  <br>
  <br>POST 19325:<br>
  <article id="post-19325" class="post-19325 post type-post status-publish format-standard">
    <hr>post 19325 has one hr</article>
  <br>
  <br>POST 19326:<br>
  <article id="post-19326" class="post-19326 post type-post status-publish format-standard">
    <hr>post 19326 has one hr</article>
</div>

Answer 3

只需将 nth-child 替换为 nth-of-type:

.entry-content hr:nth-of-type(even):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-of-type(odd):after {
content: "↓ INSPIRE ↓";
}

为相同的 <hr> 元素应用 CSS 中的两个类但未指定它们

Applying two classes in CSS for the same <hr> element but without specifying them

html

css

wordpress

separator

为相同的 <hr> 元素应用 CSS 中的两个 类 但未指定它们

Applying two classes in CSS for the same <hr> element but without specifying them

html

css

wordpress

separator

为相同的 <hr> 元素应用 CSS 中的两个类但未指定它们