如何使用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