通过CSS隐藏HTML代码上的特定部分[重复]答案

【问题标题】：Hide a specific part on an HTML code via CSS [duplicate]通过CSS隐藏HTML代码上的特定部分[重复]
【发布时间】：2020-05-28 09:10:29
【问题描述】：

我试图隐藏 HTML 代码的一部分，它本身不在标签内。

从视觉上看，这段代码给出了：CHF120.95 - CHF152.95

目标：仅显示 CHF120.95

在this post 的帮助下，我设法隐藏了 CSS 中的最后一部分，但没有隐藏中间部分 (-)。

p.price span:nth-child(n+2) {display:none;}

<p class="price">
  <span class="wcpbc-price wcpbc-price-1357" data-product-id="1357">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      120.95
    </span>
    " - "
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      152.95
    </span>
  </span>
</p>

感谢您的帮助。

【问题讨论】：

" - " 不能使用 CSS 选择。尝试将其放入 HTML 元素中，以便您可以使用 CSS 选择它。
@Daan 这是 woocommerce，所以他不能轻易做到这一点。如果您不能使用 Woocommerce 过滤器，请将 .price 的字体大小更改为 0，然后将 .amount 的字体大小增加到您想要的任何值。这是 hacky af，但它会工作。
不，CSS 没有办法。如果需要，您可以使用 JS 从 span 中删除文本。
至于您的nth-child() 选择器，您可以使用:nth-child(2)。
这应该在 PHP 中使用 Wordpress/Woocommerce 钩子等正确完成，而不是使用 CSS。

标签： html css

【解决方案1】：

如果visibility可以使用，请看代码sn-p。

p.price span:nth-child(n+2) {display:none;}

p.price {
  visibility: hidden;
}

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

<p class="price">
  <span class="wcpbc-price wcpbc-price-1357" data-product-id="1357">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      120.95
    </span>
    " - "
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">CHF</span>
      152.95
    </span>
  </span>
</p>

【讨论】：

这很有趣。这实际上只显示CHF，所以必须有一种方法来显示正确的东西。
如果你运行代码 sn-ps，它实际上显示 CHF 120.95