隐藏父元素的某些内容，但显示的孩子在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

回答

相关问题