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

我需要一个CSS/HTML“片段”添加到页面更改以下文字：如何选择性地使用CSS类更改文本？

<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类中的措辞？

来源

2014-10-29 Amo99

您需要设置一个唯一的ID为H3，或者如果这是最后一个，你可以使用'：最后child'伪代码。 – vaso123 2014-10-29 14:41:59

鉴于您当前的标记发布，您将不得不将选择器更改为：'div + div h3.category-heading :: after {..}' – Danield 2014-10-29 14:49:17

也试试这个http://jsfiddle.net/cxc0d1rt/ uisng'after '在div而不是'h3' – DaniP 2014-10-29 14:58:08

假设您可以通过包括它的HTML片段用javascript：

根据纳入mecanism（我们需要更多地了解你所使用的工具），包含的东西：

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

如果第一个解决方案打破了你的网站的一些功能（b ecause它可以覆盖定义的行为），你应该使用：

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

来源

2014-10-29 16:41:48 yunandtidus

[1]是否指示要选择哪个类：category-heading，即用[2]替换会选择第二个类别 - 首标div？ – Amo99 2014-10-29 16:56:15

此代码不会他们上班吗？然而，这一个，但有一个延迟。为什么一个人会工作，而不是另一个？ – Amo99 2014-10-29 20:09:21

根据您的工具加载不同碎片的方式，在选择类别标题之前，您可能需要等待或不需要加载所有内容。但是，如果window.onload被该工具覆盖，则第一个解决方案将无法工作。 – yunandtidus 2014-10-30 12:23:22

-1

你应该看看nth-child 要知道，这是CSS3

这会给你下面的CSS选择器：

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

来源

2014-10-29 14:42:43 yunandtidus

这仍然不行！您需要在' – Sam 2014-10-29 14:45:38

之后执行'div：nth-child（2）h3.category-heading ::这将指定h3.category标题的第二个实例（div）吗？或者代码中的第二个div？（上面的例子是从几行代码/ div中提取出来的。 – Amo99 2014-10-29 15:17:13

这会给你代码 – yunandtidus 2014-10-29 15:20:32

为什么不使用一个ID属性？

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

，并不仅仅是 #itemThatShouldBeChanged {内容： “其他文本”}

来源

2014-10-29 14:45:24

不幸的是，我无法更改代码，仅向页面添加html/CSS片段 – Amo99 2014-10-29 16:01:22

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

回答

相关问题