:not()伪类用于排除特定元素应用样式，如p:not(.highlight)为非highlight段落添加边框，li:not(:first-child)为非首个列表项增加上边距，button:not([disabled])使非禁用按钮变蓝，input:not([type=”text”]):not([type=”email”])选中非文本和邮箱类型的输入框，但:not()仅支持简单选择器且不可嵌套复杂结构。
CSS 中的 :not() 伪类选择器非常实用，它允许你为不匹配某个条件的元素应用样式。换句话说，你可以用它来排除特定元素，避免样式被错误地应用。
基本语法
使用 :not() 的语法很简单：
selector:not(要排除的选择器) { 样式规则 }
括号内可以是任意简单选择器，比如标签名、类名、属性选择器或伪类。
常见使用场景
1. 排除特定类的元素
例如，给所有没有 .highlight 类的段落添加灰色边框：
p:not(.highlight) { border: 1px solid #ccc; }
立即学习“前端免费学习笔记（深入）”；
2. 排除特定标签
比如在列表中，给所有不是第一个的 li 添加上边距：
li:not(:first-child) { margin-top: 8px; }
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情
3. 排除带特定属性的元素
你想让所有没有 disabled 属性的按钮变蓝：
button:not([disabled]) { background-color: blue; color: white; }
4. 组合排除多个条件（支持链式）
你可以嵌套多个 :not()，但注意不能完全实现“多重排除”的逻辑组合，不过可以链式使用：
input:not([type="text"]):not([type="email"]) { background: #f0f0f0; }
这会选中类型不是 text 也不是 email 的 input 元素。
注意事项
:not() 只能包含一个参数，且必须是简单选择器。以下写法是的：:not(.a .b) — 包含复合选择器，不允许 :not(div > p) — 使用了关系选择器，不允许它也不能嵌套另一个 :not() 以外的复杂结构。
基本上就这些。合理使用 :not() 能让你的 CSS 更简洁，减少不必要的类名控制。关键是理解它作用于“非”条件，精准排除不需要样式的元素。
以上就是CSS伪类:not()选择器如何使用_排除特定元素样式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/982909.html
微信扫一扫 
支付宝扫一扫 
