:not()选择器可排除特定元素以简化样式设置，如p:not(.special)排除特殊类段落，input:not([disabled])选中非禁用输入框，结合:first-child等可精准控制中间列表项或普通按钮，常用于表单边框、标题间距及网格布局间隔设置，提升代码简洁性与维护性。
CSS 的 :not() 选择器是一个非常实用的伪类，它允许你选中**不匹配某个条件的元素**。这意味着你可以轻松地为一组元素设置样式，同时排除特定的个别元素，而无需额外添加类名或使用更复杂的选择器结构。
基本用法：排除特定类或标签
:not() 接受一个简单选择器作为参数，比如类名、ID、属性、类型等。常见用法如下：
p:not(.special) —— 选中所有不是 .special 类的段落 input:not([disabled]) —— 选中所有未被禁用的输入框 *:not(span) —— 选中页面中除了 span 以外的所有元素（谨慎使用）
组合使用：提升选择灵活性
你可以将 :not() 与其他选择器结合，实现更精确的控制。例如：
.list-item:not(:first-child):not(:last-child) —— 只选中列表中间项，用于添加分隔线时避免首尾重复 button:not(.primary):not(.danger) —— 给普通按钮设置默认样式，排除已定义样式的特殊按钮 a:not([href^=”https://”]) —— 高亮非 HTTPS 外链，提醒安全风险
实用场景：简化代码结构
在实际开发中，:not() 能减少冗余类名，让 HTML 更简洁：
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情
立即学习“前端免费学习笔记（深入）”；
表单中统一设置边框，但跳过提交按钮：
input:not([type=”submit”]) { border: 1px solid #ccc; } 文章内容中所有标题加 margin，但跳过第一个标题避免顶部空白：
article h2:not(:first-of-type) { margin-top: 1.5em; } 网格布局中，给子元素设间隔，但排除最后一行底部或最右列右侧：
.grid > *:not(:nth-last-child(-n+3)) { margin-bottom: 10px; }
基本上就这些。:not() 是个轻量却强大的工具，合理使用能让 CSS 更清晰、更易维护。注意它不支持复合选择器或嵌套 :not()（如 :not(.a .b) 是无效的），但现代浏览器对它的支持已经非常完善。
以上就是CSS:not()选择器能做什么_排除指定元素样式的高级技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/979293.html
微信扫一扫 
支付宝扫一扫 
