html - 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