CSS *:not(div p) 不选择任何东西答案

【问题标题】：CSS *:not(div p) does not select anythingCSS *:not(div p) 不选择任何东西
【发布时间】：2014-08-19 03:17:55
【问题描述】：

我有以下 HTML 代码：

<div>
    <p> linux version</p>
    <h1> new tool </h1>

还有一些 CSS 应该选择 <h1> 但不选择任何东西。

*:not(div p) {
    font-family: sans-serif;
}

以下也不起作用：

*:not(div>p) {}

我在 HTML 中有很多这样的<div><p>，而以下选择并应用字体：

div p {
    font-family: sans-serif;
}

【问题讨论】：

你的问题很混乱。你能显示一些代码吗？
w3.org/TR/css3-selectors/#negation
如果你问为什么它不起作用，那是因为选择器规范说:not() 只需要一个简单的选择器 (w3.org/TR/css3-selectors/#simple-selectors-dfn)。
您只能使用simple selectors 和:not(…)。
正如其他人所说，它不是 CSS 规范的一部分。虽然规范从未阻止浏览器供应商添加独特的高级功能，但这一功能并未在任何已知的浏览器中实现。您将不得不求助于 javascript 或服务器站点生成的类名。

【解决方案1】：

正如其他人在cmets中所说：not选择器的用法是这样的：

E:not(s) - an E element that does not match simple selector s

在哪里

A simple selector is either a type selector, universal selector, 
attribute selector, class selector, ID selector, or pseudo-class.

因此，如果您希望代码正常工作，则必须向 <p> 元素添加一个您不希望使用该字体系列设置样式的类。

*:not(.classname) {
    font-family: sans-serif;
}

或者：如果您需要将字体应用于所有元素 - 通常通过在 body 元素中设置它来完成，然后文档中的其他元素继承该规则。

然后您可以在 div 中以不同方式设置 <p> 元素的样式。

body
{
   font-family: sans-serif;
}

div p
{
  /* the special font-family that you need for paragraphs within a div */
}

【讨论】：

【解决方案2】：

<div>
    <p> linux version</p>
    <h1> new tool </h1>`
</div>

现在考虑以下 CSS 代码-

*:not(div p) {
    font-family: sans-serif;
}

此代码选择除<div> 内的<p> 之外的所有元素。所以<div> 也被选择器*:not(div p) 选中，因此<div> 的所有内容都获得了样式：font-family: sans-serif。所以<div>中的<p>元素中的文本也获得了样式。

注意您应该保持跟踪，以便两个 CSS 声明不会相互矛盾。然后，如果出现这种矛盾，则应用某种样式的声明会胜过禁止将该样式应用于该元素的声明。

因此下面的代码可以正常运行

div>:not(p)
{
    font-family: sans-serif;
}

此选择器将选择 <div> 内的元素，<p> 元素除外。所以你可以改用这个。

【讨论】：

【解决方案3】：

好吧，它不会完全一样，但在这种情况下你可以使用

div>*:not(p)

而不是

*:not(div>p)

【讨论】：

【解决方案4】：

在你的问题中，给定标记：

<div>
  <p>linux version</p>
  <h1> new tool </h1>
</div>

元素是特殊元素。所以要具体。而不是为“all-but-me”定义样式（就像使用“*:not(div p)”子句一样）为“all-of-them”设置和标准，然后覆盖您认为特殊的样式。就像这里：

div {
  font-family: serif;
}

div > h1 {
  font-family: sans-serif;
}

【讨论】：

元素是特殊元素。所以要具体。而不是为“all-but-me”定义样式（就像使用“*:not(div p)”子句一样）为“all-of-them”设置和标准，然后覆盖您认为特殊的样式。就像这里： div { font-family: serif; } div > h1 { font-family: sans-serif; }