:not()选择器

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


<div class="not-red">Not Red</div>
<div class="not-red">Not Red</div>
<div>Red</div>
<div>Red</div>

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

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

:not()选择器的权重

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

:not()选择器同样会影响权重。例如，如果div:not(#id)的代码中有 id选择器，它的权重计算仍然按照id选择器，因此权重会增加，就好像它具有id。使用时:not()选择器记住这一点很重要。

:not()选择器和DOM解构

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

<div class="container">
    <form>
        <div class="input-element">
            <input type="text" />
        </div>
    </form>
    <div class="input-element">
        <input type="text" />
    </div>
</div>

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

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

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

<div class="container">
    <form>
        <input type="text" />
    </form>
    <input type="text" />
</div>

注意

重要的是要注意选择器有两个版本:not()——一个只接受一个简单的 CSS 选择器，:not()另一个接受任何 CSS 选择器。

所有浏览器都支持单一、简单:not()的选择器，就像我们目前使用的选择器一样，包括 Internet Explorer。然而，并不是所有的浏览器都支持复杂的选择器。使用 in 中的简单选择器:not，您可以执行以下所有操作：

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

但是，以下内容仅适用于复杂选择器：

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

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

CSS :not选择器

:not()选择器

:not()选择器的权重

:not()选择器和DOM解构

注意