如何使用 CSS 隱藏元素中的文字節點，同時保持其他元素可見？

定位元素內的文字節點

CSS 允許您設定特定元素及其子元素的樣式，但是如果您想隱藏或操作元素內的文字同時使周圍的元素可見？考慮以下 HTML：

<div>
<p>目標是隱藏文字「點擊關閉」而不影響 div 或其內的連結。 </p>
<p><strong>利用可見性</strong></p>
<p>visibility 屬性可以隱藏或顯示元素。但是，與顯示屬性不同的是，可以為子元素單獨設定可見性。這允許您選擇性地隱藏文字節點：</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

在此範例中，div (#closelink) 的可見性“折疊”，隱藏其整個內容，包括文字節點。但是，div (a) 中連結的可見性設定為“可見”，從而覆蓋父級的可見性並顯示連結及其包含的文字。

此技術有效隱藏文字節點，同時保留周圍的元素，為 CSS 中的細粒度內容操作提供快速、簡單的解決方案。