Question

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

我正在尝试删除“来自”一词。我确信必须使用像<input type="number" name="myNumber" min="-100" max="100" step="0.01" value="1" />这样的简单方法。

.price:pre {display:none;}

如何从此代码中隐藏单词“From”，理想情况下使用CSS？我对functions.php中的javascript持开放态度。

由于Wordpress的限制性及其输出的代码，我无法编辑上面的代码段。我必须在CSS或functions.php

中操作上面的代码

Answer 1

您可以使用font-size隐藏文字，然后为子跨度元素覆盖它，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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。

Answer 3

像这样：

.price {display:none;}

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

Answer 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;}

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

4 个答案: