:not(selector) 不能正常工作答案

【问题标题】：:not(selector) isn't working properly:not(selector) 不能正常工作
【发布时间】：2017-01-12 19:16:37
【问题描述】：

为什么下面的代码不起作用？它应该隐藏所有不是p 但display 属性不能正常工作的元素。

p {
  color: #000000;
}
 :not(p) {
  display: none;
  color: #ff0000;
}

 <h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="http://www.w3schools.com" target="_blank">Link to W3Schools!</a>

【问题讨论】：

你必须指定：body :not(p)
按预期工作。隐藏除p 之外的所有元素，包括p 的祖先。
@Oriol 代码具有正确的行为，但不是 OP 正在寻找的；)
@dippas 好吧，OP 描述了他的预期，这似乎是结果行为。他们说它工作不正常，没有进一步的细节。假设不希望隐藏p 的祖先只是一种猜测。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为和特定的问题或错误。没有明确问题陈述的问题对其他读者没有用处。
@Oriol 好吧，我理解你，但是给出例子和这个It should hide all the elements that are not p 答案只能是给出例子对吗？ :) 我要把这个添加到我的答案中

标签： html css css-selectors pseudo-class

【解决方案1】：

鉴于您的示例和您的要求

它应该隐藏所有不是p的元素

你必须使用body :not(p) - 这意味着你在not() 中使用* 就像这样body *:not(p) - 所以声明它将应用样式到所有的孩子body 除了p

body *:not(p) {
  display: none;
  color: #f00;
}
p {
  color: #000;
}

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="http://www.w3schools.com" target="_blank">Link to W3Schools!</a>

【讨论】：

【解决方案2】：

div *:not(p) em {…}

这会选择一个元素中的所有 em 元素（不是 p 元素）和 div 元素中的元素。所以 … 是匹配的，但是

…
不是。

也许您应该包括除法。 My reference

【讨论】：