他の要素を表示したまま、CSS を使用して要素内のテキスト ノードを非表示にするにはどうすればよいですか?

要素内のテキスト ノードをターゲットにする

CSS を使用すると、特定の要素とその子のスタイルを設定できますが、周囲の要素を表示したまま、要素内のテキストを表示しますか?次の HTML について考えてみましょう:

<div>

目的は、div やその中のリンクに影響を与えずに、「クリックして閉じる」というテキストを非表示にすることです。

可視性の活用

visibility プロパティは要素を非表示または表示できます。ただし、表示プロパティとは異なり、子要素の可視性を個別に設定できます。これにより、テキスト ノードを選択的に非表示にすることができます:

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

この例では、div (#closelink) の可視性が「折りたたまれ」、テキスト ノードを含むコンテンツ全体が非表示になります。ただし、div (a) 内のリンクの可視性は「可視」に設定され、親の可視性がオーバーライドされ、リンクとそのリンクに含まれるテキストが表示されます。

この手法では、テキスト ノードの可視性を維持しながら効果的にテキスト ノードを非表示にします。要素を囲み、CSS でのきめ細かいコンテンツ操作のための迅速かつ簡単なソリューションを提供します。

以上が他の要素を表示したまま、CSS を使用して要素内のテキスト ノードを非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。