隐藏父元素的某些内容，但在 CSS 中显示子元素答案

【问题标题】：Hide certain content from a parent element but show child in CSS隐藏父元素的某些内容，但在 CSS 中显示子元素
【发布时间】：2017-05-09 23:22:13
【问题描述】：

我在 Wordpress Woocommerce 网站上有以下代码，输出“From £189.00”

我正在尝试删除“发件人”一词。我敢肯定，一定有一种简单的方法可以使用 .price:pre {display:none;} 之类的东西。

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

如何在这段代码中隐藏“发件人”一词，最好使用 CSS？我对functions.php中的javascript持开放态度。

由于 Wordpress 的限制性及其输出的代码，我无法编辑上面的 sn-p。我必须在 CSS 或 functions.php 中操作上述代码

【问题讨论】：

简答，没办法
Show Child Div within Hidden Parent Div的可能重复

标签： javascript html css wordpress woocommerce

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

既然已经说这是不可能的，请查看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。

【讨论】：

@Anthony: 已包含在答案中。谢谢。
很好的解决方案，谢谢。谁说做不到！感觉不像@Dryden Long 的回答那么老套，但实际上他在实践中工作得稍微好一些，因为出于某种原因我不得不在你的解决方案中添加一些填充，所以他使用的代码更少。不管怎样，只是想说声谢谢。

【解决方案3】：

像这样：

.price {display:none;}

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

【讨论】：

【解决方案4】：

更改 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;}

【讨论】：