如何更改特定標籤的內容？

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