如何使用：not（）伪类在h1标记内排除span标记

Question

假设我有一个看起来像这样的h1标签：

<h1>
  I don't want to see this, <span>but I want to see this.</span>
</h1>

我需要的是仅使用CSS使<h1>不可见，而不会影响<span>。它应该是这样的：

but I want to see this.

即使可以正常工作：

h1 {
  visibility: hidden;
}
span {
  visibility: visible;
}

仅使用一个选择器可能会更好，我认为通过使用:not()伪类，我可以轻松解决此问题。像这样的东西：

h1:not(span) {
  visibility: hidden;
}

虽然这不起作用，但我不明白为什么。任何想法为什么会这样？

这里是JSFiddle

Answer 1

虽然这不起作用，但我不明白为什么。任何想法为什么会这样？

因为h1永远不是span。

这是选择器：

h1:not(span)

这里的逻辑是这样的：定位所有非跨度的h1。

您寻求的逻辑是：忽略属于h1s子级的跨度。完全不同。