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.pswp.cn/web/88103.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/88103.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BTC】比特币网络

目录 一、比特币网络架构 1.1 节点加入与离开 二、消息传播方式 三、交易处理机制 四、网络传播问题 五、实际应用问题及解决 本章节讲比特币网络的工作原理&#xff0c;讲解新创建的区块是如何在比特币网络中传播的。 一、比特币网络架构 比特币工作在应用层&#xff…

Clickhouse 的历史发展过程

20.5.3 开始支持多线程20.6.3 支持explainmysql 20.8 实时同步mysql&#x1f4cc; ‌一、早期版本阶段&#xff08;1.1.x系列&#xff09;‌‌版本范围‌&#xff1a;1.1.54245&#xff08;2017-07&#xff09;→ 1.1.54394&#xff08;2018-07&#xff09;‌核心特性‌&#x…

玩转n8n工作流教程(一):Windows系统本地部署n8n自动化工作流(n8n中文汉化)

在Windows系统下使用 Docker 本地部署N8N中文版的具体操作&#xff0c;进行了详尽阐述&#xff0c;玩转n8n工作流教程系列内容旨在手把手助力从0开始一步一步深入学习n8n工作流。想研究n8n工作流自动化的小伙伴们可以加个关注一起学起来。后续也会持续分享n8n自动化工作流各种玩…

mini-program01の系统认识微信小程序开发

一、官方下载并安装 1、下载&#xff08;I选了稳定版&#xff09; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2、安装&#xff08;A FEW MOMENT LATER&#xff09;…

如何将 Java 项目打包为可执行 JAR 文件

如何将 Java 项目打包为可执行 JAR 文件我将详细介绍将 Java 项目打包为可执行 JAR 文件的完整流程&#xff0c;包括使用 IDE 和命令行两种方法。方法一&#xff1a;使用 IntelliJ IDEA 打包步骤 1&#xff1a;配置项目结构打开项目点击 File > Project Structure在 Project…

【Starrocks 异常解决】-- mysql flink sync to starrocks row error

1、异常信息 flink 1.20 starrocks 3.3.0 mysql 8.0 errorLog: Error: Target column count: 35 doesnt match source value column count: 28. Column separator: \t, Row delimiter: \n. Row: 2025-05-22 6 23400055 214 dssd 1 1 1928 mm2er 360 20000.00000000 1…

Jenkins 使用宿主机的Docker

背景&#xff1a;不想在Jenkins 内部安装Docker,想直接使用Jenkins服务所在的系统安装的docker当你在 Jenkins 中执行 docker 命令时&#xff0c;实际上是通过 Docker 客户端与 Docker 守护进程进行通信。Docker 客户端和守护进程之间的通信是通过一个名为 /var/run/docker.soc…

工具+服务双驱动:创客匠人打造中医IP差异化竞争力

一、技术工具场景化定制&#xff1a;中医专业的可视化破圈在中医IP同质化严重的行业现状下&#xff0c;创客匠人以场景化技术工具破解专业传播难题。系统内置的“体质测试”模块可生成个性化调理报告&#xff0c;“案例库”支持前后对比图上传&#xff0c;“直播问诊”自动添加…

JVM对象分配内存如何保证线程安全?

大家好&#xff0c;我是锋哥。今天分享关于【JVM对象分配内存如何保证线程安全&#xff1f;】面试题。希望对大家有帮助&#xff1b; JVM对象分配内存如何保证线程安全&#xff1f; 超硬核AI学习资料&#xff0c;现在永久免费了&#xff01; 在Java中&#xff0c;JVM&#xf…

机器学习中的数据对齐

文章目录前言数据集怎么理解数据数据对齐为什么偏偏是这样对齐&#xff1f;前言 在神经网络中&#xff0c;我们往往会根据数据集构建训练集、测试集&#xff0c;有时会有验证集。但是&#xff0c;在构建完成后&#xff0c;如果直接将这些数据直接扔进模型训练&#xff0c;输入…

机器学习:更多分类回归算法之决策树、SVM、KNN

下面介绍的这几种算法&#xff0c;既能用于回归问题又能用于分类问题&#xff0c;接下来了解下吧。 决策树 可参考&#xff1a; 决策树&#xff08;Decision Tree&#xff09; | 菜鸟教程 决策树&#xff08;Decision Tree&#xff09;是一种常用的监督学习算法&#xff0c;可用…

Vue 整合 Vue Flow:从零构建交互式流程图

目录引言目的适用场景环境准备基础组件 (index.vue)自定义组件 (矩形、菱形等)RectangleNode.vue (矩形节点)&#xff1a;DiamondNode.vue (菱形节点)&#xff1a;ImageNode(自定义图片节点):操作实现 (#操作实现) 拖拽节点 (#拖拽节点) 连线 (多连接点) 删除节点 …

C# WPF - Prism 学习篇:搭建项目(一)

一、前期准备开发工具&#xff1a;Visual Studio 2022二、创建项目1、创建WPF 应用“WpfApp.StudyDemo”&#xff1a;2、项目结构如下&#xff1a; 三、安装 Prism1、选中项目“WpfApp.PrismDemo”&#xff0c;在右键菜单中选择“管理 NuGet 程序包(N)...”。2、在搜索框中输入…

单片机 基于rt-thread 系统 使用 CCM内存

一、开发环境 开发板&#xff1a;野火stm32f407 系统&#xff1a;rt-thread V4.1.1 二、链接脚本配置 ; ************************************************************* ; *** Scatter-Loading Description File generated by uVision *** ; ****************************…

【UnityAssetBundle】AB包卸载资源

AB包的卸载高效稳定游戏开发的强制要求&#xff0c;它解决了资源管理中的内存泄漏问题&#xff0c;为动态的内容加载、热更新、大型世界的构建提供了内存保障&#xff0c;最终提升了游戏性能、稳定性和用户体验。卸载资源方式一&#xff08;推荐使用&#xff09;&#xff1a;卸…

【万字长文】深度学习2 yolov5修改为自己的数据集

数据预处理 使用labelme可以直接导出适用于yolo模型的txt文本数据&#xff0c;也可以直接导出默认的json数据结构&#xff0c;后面我会提供代码进行转换。自行进行标注&#xff0c;图片与标注一一对应&#xff0c;更多要求不赘述。因为我做最简单的检索模型&#xff0c;不做切…

ubuntu18编译RealSense SDK 2.0

参考文章&#xff1a;https://dev.intelrealsense.com/docs/compiling-librealsense-for-linux-ubuntu-guide1、安装依赖 sudo apt-get update && sudo apt-get upgrade && sudo apt-get dist-upgrade sudo apt-get install libssl-dev libusb-1.0-0-dev libud…

算法学习笔记:9.Kruskal 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题

在图论的众多算法中&#xff0c;Kruskal 算法以其简洁高效的特性&#xff0c;成为求解最小生成树&#xff08;Minimum Spanning Tree&#xff0c;MST&#xff09;的经典方法。无论是在通信网络的优化设计、电路布线的成本控制&#xff0c;还是在计算机考研 408 的备考过程中&am…

Vue+Openlayers加载OSM、加载天地图

文章目录1. 介绍2. 加载底图2.1 加载默认OSM地图2.2 加载天地图1. 介绍 Openlayers官网&#xff1a;https://openlayers.org/ 安裝依赖&#xff1a;npm i ol 2. 加载底图 参考博客&#xff1a; vueopenlayers环境配置&#xff1a;https://blog.csdn.net/cuclife/article/det…

Python处理电子表格文件库之pyexcel使用详解

概要 pyexcel是一个功能强大的Python第三方库,专门用于处理各种格式的电子表格文件。核心价值在于提供了统一的接口来读取、写入和操作Excel、CSV、ODS等多种电子表格格式,极大简化了数据处理工作流程。与传统的单一格式处理库不同,pyexcel采用了插件化架构,使开发者能够通…