css中 :not() 伪类选择器用法

:not() 是CSS的一个否定伪类选择器。它可以将一个简单选择器（如下所示）作为参数，然后匹配一个或多个不由参数表示的元素。

:not() 选择器和 :has() 选择器有点相似，可点击了解 :has() 选择器。

能作为:not()参数的可以是以下任何一种的简单选择器：

1、标签选择器（例如p，span等）
2、类选择（例如.element，.sidebar等）
3、ID选择器（例如#header）
4、伪类选择器（例如:first-child，:last-of-type）
5、属性选择器（例如[type="checkbox"]，[href^="http"]）
6、通用选择器（*）

举例

单个的not写法：

/*设置非 p 元素的所有元素的背景色*/
:not(p)
{
 background-color: #ff0000;
}

组合的not写法：

/*设置非 https 开头的链接的颜色*/
a:not([href^="https"]){
     color: #ff0000;
  }

/*设置input[type="text"]的样式不作用在有 no-red 的类上*/
input[type="text"]:not(.no-red) {
    display: block;
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    color: red;
}

/*选中div里面非首个、非最后一个的中间p元素*/
div p:not(:first-child):not(:last-child){
}

假如没有 :not() 选择器，我们要实现如上效果也是非常费事的一件事情，冗余代码多。其实 :not() 选择器的使用思想跟数学上补集的思想类似。:not() 选择器在实际开发中非常实用，也比较灵活。