如何更改特定标签的内容？

Question

我正在尝试更改特定标签的内容。我现在有这个，但它不工作。

<label for="product_configure_variants">Make a choice: <em>*</em></label> 

..

<style> 
label:before[for="product_configure_variants"]{content: "my new content"!important;} 
</style> 

谁能帮助请得到它的工作？将“做出选择：”改为“我的新内容”。

Answer 1

您可以在标签上设置font-size: 0以隐藏其文本，然后再次更改字体大小em和before伪元素以显示它们，您的选择器也是错误的。

label[for="product_configure_variants"] { 
 
    font-size: 0; 
 
} 
 
label[for="product_configure_variants"]:before { 
 
    content: "my new content"; 
 
    font-size: 16px; 
 
} 
 
label em { 
 
    font-size: 16px; 
 
}

<label for="product_configure_variants">Make a choice: <em>*</em></label>

您还可以使用js和选择标签的内容，并检查是否节点类型为3或文本，如果指数为0，然后将其删除。

$('label[for="product_configure_variants"]').contents().each(function(i) { 
 
    if(i == 0 && this.nodeType == 3) $(this).remove() 
 
})

label[for="product_configure_variants"]:before { 
 
    content: "my new content"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="product_configure_variants">Make a choice: <em>*</em></label>

Answer 2

它可以通过以下方式进行：

选项1：只需添加一个类的标签，如下操作：

HTML：

<label for="product_configure_variants" class="my-label">Make a choice: <em>*</em></label> 

JS：

$('.my-label').text('My new Content'); 

Demo

选项2：通过label访问和属性for。

HTML：

<label for="product_configure_variants">Make a choice: <em>*</em></label> 

JS：

$('label[for="product_configure_variants"]').text('My new Content'); 

Demo