:not伪类用于选中不满足条件的元素，如p:not(.special)排除特定类，input:not([disabled])排除禁用状态，li:not(:last-child)排除最后一个子元素，可结合标签、类、属性等选择器精准控制样式，支持多条件排除如div:not(.warning, .error, [hidden])，提升CSS简洁性与可维护性。
CSS 的 :not 伪类非常实用，它允许你选中不符合指定条件的元素。换句话说，你可以用它来“排除”某些特定元素，让样式只作用于其余元素。使用方法简单灵活，特别适合在不修改 HTML 结构的情况下进行精准样式控制。
基本语法
:not(选择器) 会匹配所有不满足括号内选择器条件的元素。括号里可以是标签名、类名、ID、属性选择器等。
例如：
p:not(.special)
：选中所有不是 .special 类的 p 元素
input:not([disabled])
：选中所有未被禁用的 input 元素
li:not(:last-child)
：选中除最后一个以外的所有 li 元素
排除带有特定类的元素
当你想对某类元素统一设置样式，但想跳过其中具有某个类的元素时，:not 非常有用。
示例：
div:not(.highlight) { background-color: #f0f0f0;}
这个规则会给所有 div 添加浅灰色背景，但不会影响 class=”highlight” 的 div。
立即学习“前端免费学习笔记（深入）”；
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
排除特定标签或状态
你可以结合其他伪类或标签名来更精确地排除元素。
常见用法包括：
a:not(:visited)
：给未访问过的链接设置样式
button:not(.primary)
：对非主要按钮应用默认样式
:not(.hidden)
：选中所有没有 .hidden 类的元素（可用于批量显示）
组合多个排除条件
虽然 :not 不支持在单个伪类中写多个选择器（如
:not(.a, .b)
是无效的），但从 CSS3 开始，现代浏览器已支持在 :not 中使用逗号分隔的选择器列表。
正确写法：
div:not(.warning, .error, [hidden]) { border: 1px solid green;}
这条规则会为既不是 .warning、也不是 .error、且没有 [hidden] 属性的 div 添加绿色边框。
基本上就这些。掌握 :not 能让你的 CSS 更简洁、更具可维护性，避免不必要的重复类名或内联样式。关键是理解它的逻辑是“取反”，然后根据需要组合类、属性或伪类即可。不复杂但容易忽略。
以上就是如何用css:not伪类排除特定元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1071433.html
微信扫一扫 
支付宝扫一扫 
