<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
WooCommerceで作業します。外側スパンに含まれていて、内側スパンに含まれている価格を表示する「low」を非表示にしたいと思います。CSS外側スパンを非表示にして内側スパンを表示
誰かがこれを行う方法について私を導くことができたら。
おかげ
あなたはすべてのテキストを非表示にした後、内側のスパンテキストをこのように表示するように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>可視性は、ここであなたを助けることができます。
.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>注：コンテンツは表示されませんが、スペースはまだ要求されています。 – GolezTrol
それはOPによって言及された要件ではなかったが、追加された。 –
あなたが外<span>にvisibility: hidden;を使用することができますし、あなたの内側の<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>上visibility: visible;は、適切なことを行うと、あなたのHTMを作りますLはあなたの意図を反映しています。 "低い値"のスタイルしかできないようにするには、そのテキストをそれ自身の<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>これは正解です。 – iamnotmaynard
The best solution is to change the HTML, as in 4castle's answer。何らかの理由であなたがHTMLの構造を変更することはできませんが、あなたはテキストコンテンツとCSSを変更し、また必要に応じてオブジェクトのクラスを設定する方法を持つことができる場合
しかし、（私はハック少しを使用しましたあなたがそれらをしたくない場合は
function handleClick(what) {
what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}.asLowAs::before {
content: "as low as ";
}<span class="price asLowAs" onclick="handleClick(this)">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
：トグルするようJSの作品が、それはまた、静的なページを生成する際に設定することができる）、あなたは必要なテキストを表示するために
::beforepseudoelementを使用することができます彼らが入れ子になっているように行動し、それらを入れ子にしないでください。 – 4castle@ 4castle HTML出力がこのプラグインのようになるのを制御できない場合があります – DaniP
@DaniP兄弟を収容するために奇妙なCSSを使わずにその可能性に対応する答えを出しました。 – 4castle