讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在CSS中使用:not()选择器_排除特定元素样式应用

浅伟酱_5090

浅伟酱_5090

发布时间:2025-11-24 12:03:05

|

701人浏览过

|

来源于php中文网

原创

:not()伪类用于选中不满足特定条件的元素,提升样式精确性。例如p:not(.special)选中非.special类的段落,input:not([disabled])选中未禁用的输入框;可链式排除多种情况如.user-item:not(.admin):not(.guest),但不支持逗号分隔多选择器;常用于避免重复覆盖样式,增强代码可维护性。

如何在css中使用:not()选择器_排除特定元素样式应用

CSS 中的 :not() 伪类选择器是一个非常实用的工具,它允许你为**不匹配某个条件的元素**应用样式。使用它可以避免为特定元素重复写覆盖样式,提升代码简洁性和可维护性。

基本语法与作用

:not(选择器) 会选中所有不满足括号内选择器条件的元素。括号中可以是标签名、类、ID、属性选择器等。

常见用法示例:
  • p:not(.special) —— 选中所有不是 .special 类的段落
  • input:not([disabled]) —— 选中所有未被禁用的输入框
  • :not(.hidden) —— 选中所有没有 .hidden 类的元素

排除特定类或状态的元素

当你想对一组元素统一设置样式,但希望跳过某些特殊情况时,:not() 非常有用。

例如:为所有按钮添加外边距,但排除“提交”按钮
button:not(.submit) {
  margin-right: 10px;
}

这样 .submit 类的按钮就不会有右边距,其他按钮都会应用该样式。

立即学习“前端免费学习笔记(深入)”;

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。

下载

结合属性选择器排除特定情况

你可以用 :not() 排除具有特定属性的元素,比如链接中非外部链接的样式处理。

示例:只给内部链接加下划线
a:not([href*="http"]) {
  text-decoration: underline;
}

这个规则会让所有 href 不包含 "http" 的链接(即站内链接)显示下划线,而外部链接不受影响。

链式使用多个 :not() 条件

可以通过连续使用 :not() 来排除多种情况。

例如:选中既不是 .admin 也不是 .guest 的用户项
.user-item:not(.admin):not(.guest) {
  opacity: 0.8;
}

注意:不能写成 :not(.admin, .guest),因为 :not() 不支持逗号分隔的多重选择器(目前仅接受单个参数)。

基本上就这些。合理使用 :not() 能让你的 CSS 更加精准和灵活,特别是在构建组件样式时,能有效减少冗余代码。关键是理解它匹配的是“不符合条件”的元素,逻辑上取反即可。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

相关专题

更多
点击input框没有光标怎么办
点击input框没有光标怎么办

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

874

2023.11.24

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3723

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

934

2023.11.14

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

6646

2024.03.12

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

5490

2024.08.16

Go 语言 HTTP 编程与中间件开发教程合集
Go 语言 HTTP 编程与中间件开发教程合集

全面讲解 Go 语言 HTTP 编程的核心知识,涵盖 net/http 标准库的 Server/Handler/HandlerFunc 体系、DefaultServeMux 路由注册与自定义路由器、Request / ResponseWriter 请求响应处理、中间件(Middleware)链式设计模式与常见中间件(日志/CORS/认证/限流)开发、http.Client 的超时配置与连接池管理、Cookie / Session 处理、

561

2026.05.08

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

20

2026.10.28

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

0

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 99.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn