Web前端：not（否定伪类选择器）

not（否定伪类选择器）

        CSS中的 :not() 选择器是⼀个否定伪类选择器，它⽤于选择不符合给定选择器的元素。这是⼀种排除特定元素的⽅法，可以⽤来简 化复杂的选择器，提⾼ CSS 规则的灵活性和精确性。

:not() 选择器的基本语法如下：

selector:not(selector-to-exclude) {/* 样式规则 */
}

 

• selector：基础选择器（如元素、类、ID 等）。

• selector-to-exclude：要排除的选择器（可以是简单或复合选择器）。

核心特性

1. 排除特定元素
   选择所有满足基础选择器条件，但不满足括号内选择器条件的元素。

2. 支持简单选择器
   :not() 的参数可以是：

   • 类型选择器（如 div）

   • 类选择器（如 .class）

   • ID 选择器（如 #id）

   • 属性选择器（如 [type="text"]）

   • 伪类（如 :first-child）

3. 不支持复杂选择器（旧版本限制）
   在 CSS3 中，:not() 的参数不能包含组合器（如空格、>、+），但 CSS4 允许更复杂的参数（需注意浏览器兼容性）。

示例：

1、排除特定元素

如果你想为所有除了特定类之外的 <p> 元素应⽤样式，可以这样写：

p:not(.exclude) {color: red;
}

这将会选择所有没有 .exclude 类的 <p> 元素，并将它们的⽂本颜⾊设置为红⾊。

 

 效果展示：

 

2、排除多个元素

:not() 选择器可以包含多个条件，⽤于排除多个元素：

div:not(.exclude, .ignore) {background-color: lightblue;
}

 这将选择所有不含有 .exclude 或 .ignore 类的 <div> 元素，并为它们设置浅蓝⾊背景。

效果展示：

3、结合其他选择器

:not() 可以与其他选择器结合使⽤，以创建更具体的规则：

a:not([href*="http://"]) {color: green;
}

这将会选择所有 href 属性不包含 "http://" 的 <a> 元素，并将它们的⽂本颜⾊设置为绿⾊。

注意事项

1. 优先级计算
   :not() 的优先级由其参数决定。例如：

   • div:not(.class) 的优先级 = div + .class（0,0,1 + 0,1,0 = 0,1,1）。

2. 不可嵌套伪元素
   :not() 内不能包含伪元素（如 ::before）。

总结

特性	说明
作用	排除匹配指定选择器的元素
参数限制	CSS3：仅支持简单选择器；CSS4：支持逗号分隔的复杂选择器（需注意兼容性）
优先级	由基础选择器和括号内选择器共同决定
典型用例	过滤禁用元素、排除特定类/属性、非首尾子元素样式等

通过灵活使用 :not()，可以大幅简化 CSS 代码，避免编写冗余的覆盖样式。