Question

我试图弄清楚：选择器不起作用。首先，我尝试这段代码

<!DOCTYPE html>
<html>
<head>
<style>

p {
    color: #000000;
}

:not(p) {
    color: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>

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

</body>
</html>

它的作用是ı期望段落没有样式，div中的文本和标题是红色的。之后我将样式标签中的部分更改为：

<style>
    :not(p) {
        color: #ff0000;
    }
</style>

这次它没有按照我的预期运作。虽然我希望所有不是段落的元素都是红色的，但它们都显示为红色。

此外，我正在将样式标记之间的代码更改为：

<style>
:not(p.example) {
    color: #ff0000;
}
</style>

这次我希望元素不适合“p.example”（h1，div和第二段）为红色，但没有一个元素受到影响。

我想念什么？上面显示的例子不应该选择那些不适合参数选择器的元素吗？是否存在不使用：not selector的规则（例如，不是p：not或h1：not）？

Answer 1

@abhitalks评论/反馈之后。在你的第一个例子中没有错，只是与只有继承的属性无关。颜色是继承的，但边框不是：

看看Full property table

＆＃13;

:not(p) {
  color: #f00;
  border: 1px solid gray;
}

＆＃13;

<h1>This is a heading</h1>

<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

＆＃13;

在你的第二个例子中：

选择器级别3不允许在：not（）伪类中使用单个simple selector以外的任何内容。

您可以将其更改为：

＆＃13;

body :not(.example) {
  color: #ff0000;
}

＆＃13;

<h1>This is a heading</h1>

<p class="example">This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>

＆＃13;

Answer 2

之前的答案都不完全正确。

在第二种情况下，仅指定

:not(p)

将所有颜色设置为红色，因为它为主体着色，颜色是继承的。

您要不必须指定，正如一个答案所声称的那样，

body :not(p) {
    color: #ff0000;
}

这几乎完全等同于:not(p)（这意味着*:not(p)）。您也不必指定任何其他父母，例如.main作为另一个答案声明。

第三个示例失败，因为:not的参数不是简单的选择器。您提供的语法似乎是尝试选择与p类不同的example的所有内容。正如另一位受访者所指出的那样，您可能意味着一个p但没有example类的所有内容，其中p:not(.example)是正确的。

要选择不是A而不是B的元素（换句话说not (A or B)，请执行

:not(A):not(B)

例如，

:not(h1):not(p)

在此示例中将适用于body和div。一个更现实的例子是选择除了两个类别之外的p：

p:not(.class1):not(.class2)

Answer 3

选择器:not(p)匹配除p元素之外的所有元素。这包括body元素。当您的唯一样式表为:not(p) { color: #ff0000; }时，您将所有内容颜色设置为红色，因为p元素会从父项（此处为p）继承颜色，而不会直接设置颜色。

如果要将内容的颜色设置为红色，除了p元素及其后代，您需要更加明确。一个简单的方法，假设您想要着色，是将整体颜色设置为红色，然后覆盖p元素，让内部元素继承颜色：

body { color: red }
p { color: black }

:not(p.example)根本不起作用的原因是:not的操作数必须是一个简单的选择器，即类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类，但不是这些的任何组合;而p.example并不简单。

您可以使用组合选择器:not(p):not(.example)，它匹配类p中除example元素之外的任何元素。这可能就是你想要的。但是规则不会按照想要的方式工作，因为在这里，选择器与body元素匹配，并且其颜色由唯一没有直接为其指定颜色的元素继承。因此，即使在这种情况下，您也需要另外考虑，例如设置。

body { color: red }
p.example { color: black }

Answer 4

当您使用:not选择器时，您应该提到一些父级。仅基于该父母，它将起作用。否则它将仅选择所有元素。

 <div class="main">

  <h1>This is a heading</h1>
  <p class="example">This is a paragraph.</p>
  <p>This is another paragraph.</p>

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

CSS：

 .main :not(p) {
   color: #ff0000;
 }

此外，如果您不想使用:not选择器选择特定元素，则需要使用如下所示。

 p:not(.example)
{
  color:green;
}

FIDDLE DEMO

CSS：没有组合的选择器

4 个答案: