javascript - 从父元素隐藏某些内容但在 CSS 中显示子元素

Question

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

我想删除“From”这个词。我敢肯定，一定有一种简单的方法可以使用 .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 中操作上面的代码

Answer 1

您可以使用 font-size 隐藏文本，然后像这样为子 span 元素覆盖它:

.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>