如何定位文本節點？

Question

我針對一個頁面的結構

<div class="x"> 
    <span>This should be visible</span> 
    <span>This should be visible</span> 
    This shouldn't be. 
</div> 

這不是一個網頁我自己，所以我不能改變結構或添加標籤。我只是在製作自定義樣式表，我只能使用CSS。

我首先想到的是嘗試

div.x { display: none; } 
div.x span { display: inline; } 

但這似乎只是隱藏整個元素不管。

Answer 1

使用visibility屬性：

一種方法來隱藏元素的文本節點的內容是設置visibility: hidden父div，然後重寫它的span。

使用visibility: hidden的缺點是，如果在文本節點之後有任何其他元素（請參閱下面的代碼段），它會留下空白區域。

div.x { 
 
    visibility: hidden; 
 
} 
 
div.x span { 
 
    visibility: visible; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>

---

使用font-size屬性：

其他的辦法是設置font-size: 0px父，然後重寫它的span。

這種方法的缺點是你需要知道什麼是子元素的font-size。

div.x { 
 
    font-size: 0px; 
 
} 
 
div.x span { 
 
    font-size: 16px; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>

---

使用color屬性：

還有一個辦法是設置color: transparent（如Paran0a指出）爲母公司，然後覆蓋它span。

不利的一面是，你需要知道子元素的顏色是什麼，文本會佔據空間，因爲它仍然存在，但只有顏色透明（請參閱下面的代碼片段）。

div.x { 
 
    color: transparent; 
 
} 
 
div.x span { 
 
    color: black; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>