CSS選擇器來隱藏文本節點而不是其他子元素

Question

使用CSS，我將如何選擇文本This Text。我希望刪除/隱藏它。

我不能改變HTML本身，只改變CSS。

<h2 class="hello"> 
 
     This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 1

如果你只是打算隱藏文本，做這樣的事

.hello { 
 
    font-size: 0; 
 
} 
 

 
.mark { 
 
    font-size: 30px; 
 
}

<h2 class="hello"> 
 
     This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 2

我能想到的是重寫的唯一方法span裏面隱藏了外部div。事情是這樣的：

.hello .mark { 
 
    visibility: visible; 
 
} 
 

 
.hello { 
 
    visibility: hidden; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 3

這裏的另一個想法，使用visibility，這將不會覆蓋適用於其他地方的任何font-size造型。

這種方法的輕微潛在的缺點是，它改變.hello相對定位，這可能會覆蓋已應用到它的一些佈局。

我覺得這是不是覆蓋字體大小，雖然不太可能。

.hello { 
 
    visibility: hidden; 
 
    position: relative; 
 
} 
 

 
.hello .mark { 
 
    visibility: visible; 
 
    position: absolute; 
 
    left: 0; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 4

兩個font-size: 0或visibility: hidden可用於 「隱藏」 的父。

結合這些方法將有很大的好處：

• visibility: hidden隱藏的方式文本在被選擇時它不會被複制到剪貼板。
• font-size: 0將採取仍將操縱知名度後的空間的照顧。這也可以通過使父母相對定位和孩子絕對+ top: 0來解決。然而，搞亂定位可能會造成問題 - 遲早。
• 無論如何，定義字體大小不是一個壞主意。

.hello { 
 
    visibility: hidden; 
 
    font-size: 0; 
 
} 
 
.mark { 
 
    visibility: visible; 
 
    font-size: 1.5rem; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

---

這種結合Steven Moseley's和Mehul Mohan's答案。