CSS *：not（div p）没有选择任何东西

Question

我有以下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;
}

Answer 1

正如其他人在评论中所说：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 */
}

Answer 2

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

现在考虑以下CSS代码 -

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

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

的 N.B。你应该跟踪，以便两个CSS声明不会相互矛盾。然后，如果出现这样的矛盾，那么应用某些样式的声明胜过禁止在该元素上应用该样式的声明。

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

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

此选择器将选择<div>除<p> - 元素内的元素。所以你可以改用它。

Answer 3

嗯，它不会完全相同，但在这种情况下你可以使用

div>*:not(p)

而不是

*:not(div>p)

Demo

Answer 4

在你的问题中，给出了标记：

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

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

div {
  font-family: serif;
}

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