大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏

精通CSS-点击快速学习

前言

考虑这样一个场景：假设我们有1个div标签，其内部有h1-h5标签。

我是h1
我是h2
我是h3
我是h4
我是h5

现在我们想要将除了h1标签之外的标签内文字设置为红色。通常我们的做法是其他标签逐一加上样式。

div h2,
div h3,
div h4,
div h5 {color: red;
}

如果使用:not(),写法如下：

请注意:前面有一个空格。加上空格表示选择div后代。

div :not(h1) {color: red;
}

下面这个例子，我们想选择不是special的p标签.我们的写法是:

p:not(.special){}

这里就没有空格，表示的就是选择元素为p标签且没有special。（空格和没空格是区别，是CSS中需要注意的，CSS选择器很多时候都需要逐一空格的问题）

1
2
3
4
5

:not()是什么

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

例如前面的例子，h1标签就是不想被选中的元素。:not()选择器前面的div，表示指定的范围，。假设我们的html代码变成下面这样，我们会发现在div外面的h2-h5并不会变成红色

我是h2
我是h3
我是h4
我是h5
我是h1
我是h2
我是h3
我是h4
我是h5

大部分浏览器都支持:not()选择器，指定一个应该不是某个的选择器。例如，假设

我们有四个div，有些是红色，某些不应该是红色。如果想给不是红色的div设置为红色，我们可以使用not选择器并指定不包含的选择器。

div:not(is-red) {color: red;
}

两个版本

重要的是要注意选择器有两个版本:not()—只接受单个参数的简单的:not() 选择器，只接受复杂参数的:not() 选择器

几乎所有浏览器都支持单一、简单:not()的选择器，就像我们目前使用的选择器一样，包括 Internet Explorer。然而，并不是所有的浏览器都支持复杂的选择器。

单个参数:not选择器，可以执行以下所有操作：

:not(#id)
:not(.class)
:not(element)
:not([attrbute])

复杂参数选择器:not，可以执行以下所有操作：

:not(#id, .class, [attribute])
:not(#id.class)
:not(element#id, #id.class)

单个参数的兼容性

复杂参数的兼容性

幸运的是，对复杂选择器的支持仍然很高。目前唯一不支持复杂选择器的浏览器是 Internet Explorer 和一些移动浏览器。

如果想兼容，可以使用下面的写法来兼容。

p :not(参数) :not(参数) {
}

:not()选择器的权重

在CSS中不同的选择器的权重是不同的，某些选择器的样式会覆盖其他选择器。例如class选择器的权重就比id选择器低，因此任何id属性都将覆盖同一元素上的class属性。

:not()选择器同样会影响权重。例如，如果div:not(#id)的代码中有 id选择器，它的权重计算仍然按照id选择器，因此权重会增加，就好像它就是id。总之，使用时:not()选择器，你只需要记住:not()选择器的权重与参数保持一直，如果有多个参，权重与权重最大的参数保持一致。

:not()选择器和DOM解构

需要注意的是，当你使用:not()选择器将样式应用在元素内部。例如，假设有以下 HTML：

假设我们只想将样式应用于不在form元素内部的input时，我们会这么做：

div :not(form) input {border: 2px solid red;
}

只有这样是行不通的，因为form元素内部的input是使用div包裹的。。所以这两个input元素都有一个红色边框。为避免这种情况，您需要删除div元素并使输入成为表单的直接子元素：

不允许🙈嵌套否定

需要指出的一件事是，:not()选择器是不支持嵌套的。下面的代码是错误的。

:not(:not(...)) {
}