隱藏父元素的某些內容，但顯示的孩子在CSS

我有一個WordPress的Woocommerce網站，輸出「從189.00£」在下面的代碼隱藏父元素的某些內容，但顯示的孩子在CSS

我想刪除單詞「發件人」。我確定一定有一種簡單的方法，使用像.price:pre {display:none;}這樣的東西。

<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>

如何隱藏此代碼中的單詞「From」，理想情況下使用CSS？作爲替代，我在functions.php中打開javascript。

由於Wordpress的限制性質及其輸出的代碼，我無法編輯上面的代碼片段。我不得不操縱上面的代碼中CSS或functions.php的

來源

2017-05-09 Mr N Dynamite

簡短的回答，沒有辦法做到這一點 –

[顯示隱藏父div中的子div]可能的副本（http://stackoverflow.com/questions/5521387/show-child-div-within-hidden-parent-div ） –

您可以使用font-size隱藏文本，然後將其覆蓋爲孩子跨度元素，像這樣：

.price { 
 
    font-size: 0px; 
 
} 
 

 
.price span { 
 
    font-size: 16px; 
 
}

<p class="price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span> 
 
</p>

來源

2017-05-09 15:09:39

像這樣：

.price {display:none;}

<p class="price">From: </p> 
 
<span class="woocommerce-Price-amount amount"> 
 
    <span class="woocommerce-Price-currencySymbol"> 
 
    £ 
 
    </span>189.00 
 
</span>

來源

2017-05-09 15:10:11 Sventies

改變你的HTML

<p class="price"><span class="from">From:</span> <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>189.00</span></p>

的格式和應用CSS一樣

.price .from {display:none;}

來源

2017-05-09 15:10:15

因爲這已經說是不可能的，看看https://stackoverflow.com/a/23247837/1587329。簡短的回答：

.price>.woocommerce-Price-amount 
{ 
    visibility: visible; 
} 

.price 
{ 
    visibility: hidden; 
    width: 0; 
    height: 0; 
    margin: 0; 
    padding: 0; 
}

jsfiddle感謝@Anthony's comment。

來源

2017-05-09 15:10:24

下面是這個實現的[jsfiddle]（https://jsfiddle.net/mdm4mcx3/）。 – Anthony

@Anthony：已包括在答案中。謝謝。 –

偉大的解決方案，謝謝。誰說這不可能完成！感覺比@Dryden Long的回答少一些，但實際上他的工作稍微好一些，因爲某些原因我不得不爲你的解決方案添加一些填充，所以他使用的代碼較少。無論如何，只是想說聲謝謝。 –

隱藏父元素的某些內容，但顯示的孩子在CSS

回答

相關問題