css - 要素内のテキストノードを非表示にしますが、子は非表示にしません

Question

CSSに少し問題があり、解決策が見つからないようです。私はこのHTMLを持っています

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

ここで、divもその中のリンクも非表示にせずに、「クリックして閉じる」というテキストのみを非表示にします。

これはできますか？

Answer 1

属性はvisibility子要素でオーバーライドできるため、次のことができます。

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

Answer 2

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Answer 3

試す

#closelink {
  position: relative;
  left: -9999px;
}

#closelink a {
  position: relative;
  left: 9999px;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

Answer 4

動作しますが、visibility:hidden代わりに使用できますvisibility:collapse

Answer 5

子要素が新しい行に分割されるのを防ぎ（andを使用する場合のようvisibility: hidden/collapseにvisibility: visible）、ブラウザーで9999pxのブロックを描画しないようにするには（通常、不要なオーバーヘッドがあるため、眉をひそめます）、次のことを試してください。

#closelink {
  position: relative;
  visibility: hidden;
}

#closelink a {
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

値を調整して、left: 0パディングを提供できます。

Answer 6

私が考えることができる3つの方法があります：

1

#parent {
  opacity: 1;
}

.child {
  opacity: 0;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

二

.child {
  visibility: hidden;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

三

.child {
  display: none;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

構造を維持するために画像を常にページ上に配置したいが、画像を表示したくない場合は、不透明度が最適です。これがお役に立てば幸いです。