如何使用CSS类有选择地更改文本？

Question

我需要在页面上添加CSS / HTML“片段”以更改以下文本：

<div> 
    <h3 class="category-heading">Keep this text:</h3>
</div>
<div> 
    <h3 class="category-heading">**Change this text**:</h3>
</div>

我尝试了以下方法：

<style>
    h3.category-heading {
        text-indent: -9999px;
    }
    h3.category-heading::after {
        content: “New and Featured Products”;
        text-indent: 0;
        display: block;
        line –height: 120%;
    }
</style>

但这改变了文本的两个实例。

是否可以指定要更改的CSS类的第二个实例？ 或者是否可以通过添加html片段来选择和更改第二个CSS类中的措辞？

Answer 1

为什么不使用id属性？

<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>    

而不仅仅是#itemThatShouldBeChanged {content：“ other text”}

Answer 2

假设您可以通过将Javascript包含HTML片段来使用它：

根据包含机制（我们需要更多地了解您使用的工具），其中包含：

<script>
     window.onload = function(){
          document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
     }
</script>

如果第一个解决方案破坏了您网站的某些功能（因为它可能会覆盖定义的行为），则应使用：

<script>
    document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>

Answer 3

您应该看一下nth-child请注意，这是CSS3

这将为您提供以下css选择器：

 div:nth-child(2) h3.category-heading::after