CSS:not()伪类使用详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS :not() 伪类怎么用？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

:not()是否定伪类，用于选中不匹配指定条件的元素。例如p:not(.special)选择非.special类的段落，input:not([disabled])选择未禁用的输入框，li:not(:last-child)为非最后一项的列表添加下边距，img:not(.no-border)为无.no-border类的图片加边框，支持类、ID、元素、属性及伪类选择器，CSS Level 4起支持多选择器逗号分隔，但不可嵌套:not()，且不影响选择器权重，合理使用可提升代码简洁性与可维护性。

CSS 伪类 :not() 是一个否定选择器，用来选中不匹配指定条件的元素。它能帮助我们更灵活地排除某些元素，简化样式规则的编写。

基本语法

:not(选择器) 接受一个参数，这个参数是一个简单选择器，比如类型选择器、类名、属性选择器、伪类等。它会选中所有不符合该选择器的元素。

• p:not(.special)：选择所有不是 .special 类的段落
• input:not([disabled])：选择所有未被禁用的输入框
• :not(.hidden)：选择所有没有 .hidden 类的元素

支持的选择器类型

:not() 可以接受多种简单选择器，但不能嵌套复合选择器或多个复杂选择器（在 CSS Selectors Level 3 中限制较多，Level 4 有所增强）。

• 类选择器：:not(.btn)
• ID 选择器：:not(#header)
• 元素选择器：:not(span)
• 属性选择器：:not([href])
• 伪类选择器：:not(:focus)

实际应用场景

使用 :not() 能避免重复写样式，让代码更简洁。

• 表单样式优化：
  input:not([type="submit"]) { border: 1px solid #ccc; }
  给所有非提交按钮的输入框添加边框。
• 列表项去重样式：
  li:not(:last-child) { margin-bottom: 10px; }
  为每个列表项添加下边距，但最后一个除外。
• 排除特定类：
  img:not(.no-border) { border: 2px solid #000; }
  所有图片加边框，但带有 .no-border 的跳过。

注意事项

虽然 :not() 很方便，但也有一些限制和细节需要注意。

• 只能传入一个选择器（Level 3），但 Level 4 支持逗号分隔多个，如 :not(.a, .b)
• 不能嵌套 :not() 在另一个 :not() 中（部分浏览器可能不支持）
• 不影响选择器权重计算 —— :not(.class) 的权重等于 .class 本身
• 尽量避免过度使用，保持可读性

到这里，我们也就讲完了《CSS:not()伪类使用详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！