当前位置: 首页 > news >正文

Web前端:not(否定伪类选择器)

not(否定伪类选择器)

        CSS中的 :not() 选择器是⼀个否定伪类选择器,它⽤于选择不符合给定选择器的元素。这是⼀种排除特定元素的⽅法,可以⽤来简 化复杂的选择器,提⾼ CSS 规则的灵活性和精确性。
:not() 选择器的基本语法如下:
selector:not(selector-to-exclude) {/* 样式规则 */
}
 
  • selector:基础选择器(如元素、类、ID 等)。

  • selector-to-exclude:要排除的选择器(可以是简单或复合选择器)。

核心特性

  1. 排除特定元素
    选择所有满足基础选择器条件,但不满足括号内选择器条件的元素。

  2. 支持简单选择器
    :not() 的参数可以是:

    • 类型选择器(如 div

    • 类选择器(如 .class

    • ID 选择器(如 #id

    • 属性选择器(如 [type="text"]

    • 伪类(如 :first-child

  3. 不支持复杂选择器(旧版本限制)
    在 CSS3 中,:not() 的参数不能包含组合器(如空格、>+),但 CSS4 允许更复杂的参数(需注意浏览器兼容性)。

示例:

1、排除特定元素
如果你想为所有除了特定类之外的 <p> 元素应⽤样式,可以这样写:
p:not(.exclude) {color: red;
}
这将会选择所有没有 .exclude 类的 <p> 元素,并将它们的⽂本颜⾊设置为红⾊。

 

 效果展示:

 

2、排除多个元素
:not() 选择器可以包含多个条件,⽤于排除多个元素:
div:not(.exclude, .ignore) {background-color: lightblue;
}

 这将选择所有不含有 .exclude .ignore 类的 <div> 元素,并为它们设置浅蓝⾊背景。

效果展示:

3、结合其他选择器
:not() 可以与其他选择器结合使⽤,以创建更具体的规则:
a:not([href*="http://"]) {color: green;
}
这将会选择所有 href 属性不包含 "http://" <a> 元素,并将它们的⽂本颜⾊设置为绿⾊。

注意事项

  1. 优先级计算
    :not() 的优先级由其参数决定。例如:

    • div:not(.class) 的优先级 = div + .class(0,0,1 + 0,1,0 = 0,1,1)。

  2. 不可嵌套伪元素
    :not() 内不能包含伪元素(如 ::before)。

总结

特性说明
作用排除匹配指定选择器的元素
参数限制CSS3:仅支持简单选择器;CSS4:支持逗号分隔的复杂选择器(需注意兼容性)
优先级由基础选择器和括号内选择器共同决定
典型用例过滤禁用元素、排除特定类/属性、非首尾子元素样式等

通过灵活使用 :not(),可以大幅简化 CSS 代码,避免编写冗余的覆盖样式。

http://www.lryc.cn/news/582891.html

相关文章:

  • boost中boost::noncopyalbe和boost::ignore_unused的使用详解和实战示例
  • 网络--初级
  • NestJS 系列教程(四):中间件、中断器与异常过滤器详解
  • 17-C#的socket通信TCP-1
  • 【python】 time_str = time_str.strip() 与 time_str = str(time_str).strip() 的区别
  • Spring Batch终极指南:原理、实战与性能优化
  • 开源 python 应用 开发(四)python文件和系统综合应用
  • ${project.basedir}延申出来的Maven内置的一些常用属性
  • Linux 第一个系统程序 - 进度条
  • 基于springboot的物流配货系统
  • 内网服务器怎么设置公网远程访问? windows桌面连接和Linux自带SSH外网异地跨网用完整步骤教程
  • JK触发器Multisim电路仿真——硬件工程师笔记
  • 【读论文】GLM-4.1V-Thinking 解读:用强化学习解锁 VLM 的通用推理能力
  • 进程于线程 -1
  • 小架构step系列08:logback.xml的配置
  • 数据提取之lxml模块与xpath工具
  • LLM探索的时代
  • 大学数字经济专业课程介绍
  • maven 发布到中央仓库之持续集成-03
  • 无缝矩阵支持音频分离带画面分割功能的全面解析
  • 【适合 Java 工程师的 AI 转型方向】
  • Shader面试题100道之(21-40)
  • 复杂任务攻坚:多模态大模型推理技术从 CoT 数据到 RL 优化的突破之路
  • 使用python的 FastApi框架开发图书管理系统-前后端分离项目分享
  • Linux操作系统:再谈虚拟地址空间
  • 【UE5】虚幻引擎的运行逻辑
  • 智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
  • Tomcat与IIS:核心差异及接口调用实战解析
  • Spring中过滤器和拦截器的区别及具体实现
  • 26.安卓逆向2-frida hook技术-解密响应