如何使用：not（）伪类排除子元素

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) {
  visibility: hidden;
}

这里的逻辑是这样的：定位所有非跨度的h1。总是如此，因此visibility: hidden始终处于活动状态。与仅使用h1相同。

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

我认为使用两个选择器，就像您已经拥有的那样，是可行的方法。

Answer 2

visibility属性未应用于h1's子级，而是直接应用于h1。您无法定位h1，它是单个选择器中的子级。