ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Web前端:not(否定伪类选择器)

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 代码,避免编写冗余的覆盖样式。

返回列表