Question

我需要添加一个CSS / HTML＆＃39;片段＆＃39;到页面更改以下文本：

<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：＆＃34;其他文字＆＃34;}

Answer 2

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

取决于包含机制（我们需要了解您使用的工具的更多信息），包含以下内容：

<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

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

3 个答案: