: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(.a.b),但现在主流浏览器已支持多个类的组合写法。
实际应用场景
使用 :not() 能避免重复写样式,让代码更简洁。
易森网络企业版
如果您是新用户,请直接将本程序的所有文件上传在任一文件夹下,Rewrite 目录下放置了伪静态规则和筛选器,可将规则添加进IIS,即可正常使用,不用进行任何设置;(可修改图片等)默认的管理员用户名、密码和验证码都是:yeesen系统默认关闭,请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld
0 查看详情
立即学习“前端免费学习笔记(深入)”;
表单样式优化: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 本身 尽量避免过度使用,保持可读性基本上就这些。合理使用 :not() 能让你的 CSS 更加高效和清晰。
以上就是css伪类:not()在筛选元素中如何使用的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1022350.html
微信扫一扫
支付宝扫一扫