Question

<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>

在WooCommerce工作我想隐藏＆＃34;低至＆＃34;它包含在外跨度中，但显示内部跨度中包含的价格。

如果有人可以指导我如何做到这一点。

由于

Answer 1

您可以修改font-size值以隐藏所有文本，然后以这种方式显示内部跨度文本：

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

<span class="price">
  as low as 
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
     1,335.79
  </span>
</span>

Answer 2

可见性可以帮到你。

.price {
  visibility: hidden;
}

.price > span {
  visibility: visible;
}

<span class="price">as low as 
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>

如果还需要删除隐藏文本占用的空间，则font-size:0是某些浏览器中的一个选项，前提是您将内部文本重置为所需大小。

.price {
  visibility:hidden;
  font-size:0;
  }

.price > span {
  visibility:visible;
  font-size:1rem;
  }

<span class="price">as low as 
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>

Answer 3

您可以在外部visibility: hidden;上使用<span>，在内部visibility: visible;上使用<span>

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

<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>

Answer 4

做正确的事，让你的HTML反映你的意图。如果您希望只能设置“低至”的样式，请将该文本包装在其自己的<span>中并隐藏它。这比尝试选择带有CSS的文本节点并且还会影响兄弟姐妹的CSS更加清晰。

.hidden {
  display: none;
}

<span class="price">
    <span class="hidden">as low as</span> 
    <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">$</span>
        1,335.79
    </span>
</span>

Answer 5

The best solution is to change the HTML, as in 4castle's answer

但是，如果由于某种原因您无法更改HTML结构，但可以更改文本内容和CSS，还可以根据需要在对象上设置类（I使用了一个hacky的小块来切换，但它也可以在生成静态页面时设置），你可以使用::before pseudoelement来显示所需的文本：

＆＃13;

function handleClick(what) {
  what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}

＆＃13;

.asLowAs::before {
  content: "as low as ";
}

＆＃13;

<span class="price asLowAs" onclick="handleClick(this)">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
    1,335.79
  </span>
</span>

＆＃13;

CSS隐藏外部跨度并显示内部跨度

5 个答案: