CSS如何以無標籤爲目標元素

Question

我試圖將不包含在任何特定標籤或包裝中的文本作爲目標。我是從WordPress的拉動信息，使用WordPress調用，因此我將無法編輯我在我拉

的HTML/PHP看起來是這樣的：

<div class="content-box"> 
    <?= $page[0]->post_content; ?>  
</div> 

的HTML輸出這樣：

<div class="content-box"> 
    <h1>Title Here</h1> 
    Here is some text I need to target 
</div> 

我需要隱藏（和使用jQuery操縱）在內容框中的文本，雖然我不能添加任何HTML圍繞它來包裝它。

我想要做的是最初隱藏文字和fadeIn()懸停。那麼，我如何使用CSS來定位該文本？

感覺就像我需要做這樣的事情：

.content-box > *:not(h1){ 
    display:none; 
} 

但是，這並不這樣做。

Answer 1

值得指出的是，您可以使用visibility: hidden隱藏父元素，然後使用visibility: visible顯示h1元素。不幸的是，你不能用display屬性來做到這一點。

.content-box { 
 
    visibility: hidden; 
 
} 
 
h1 { 
 
    visibility: visible; 
 
}

<div class="content-box"> 
 
    <h1>Title Here</h1> 
 
    Here is some text I need to target 
 
</div>

如果你想換行，跨度文本節點，你可以使用：

$('.content-box').contents().filter(function() { 
    return this.nodeType === 3; 
}).wrap('<span></span>'); 

Example Here