异常教程

css not（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 CSS 开发中，选择器是控制元素样式的“导航仪”，而 :not() 作为其中一种否定选择器，能够精准排除特定元素的样式应用。对于编程初学者来说，理解如何“否定”某些元素的样式可能显得抽象；而中级开发者则可能希望深入掌握其与复杂选择器的结合技巧。本文将以 “css not” 为核心，从基础到进阶，通过实际案例和代码示例，帮助读者掌握 :not() 的灵活运用，并了解其在真实场景中的价值。

什么是 :not()？基础语法与核心作用

:not() 是 CSS 中的一个伪类选择器，用于 排除符合特定条件的元素。其语法格式为：

selector:not(simple-selector-list) {  
  /* 样式规则 */  
}

这里的 simple-selector-list 可以是类名、标签名、属性选择器等简单选择器。例如，div:not(.active) 表示“所有未添加 active 类的 div 元素”。

类比理解：过滤器的反向操作

可以把 :not() 想象成一个 反向过滤器。例如，假设你有一堆水果，其中苹果是红色，其他水果是绿色。若想给非苹果的水果添加绿色背景，可以用 fruit:not(.apple)，这样所有不带 apple 类的元素都会应用样式。

基础案例：排除特定类的样式

/* 为所有段落设置灰色背景，但排除 class 为 "highlight" 的段落 */  
p:not(.highlight) {  
  background-color: #f0f0f0;  
  padding: 10px;  
}

在 HTML 中：

<p class="highlight">这段文字不会变灰</p>  
<p>这段文字会应用灰色背景</p>

:not() 的典型应用场景

场景 1：悬停效果的精准控制

在表格或列表中，开发者常需要为悬停行添加高亮效果，但通常希望排除表头或固定行。例如：

/* 排除表格头部 tr，仅对其他行应用悬停效果 */  
table tr:not(:first-child):hover {  
  background-color: #e0e0e0;  
}

此代码通过 :first-child 定位到第一个 <tr>（表头），并排除它，使悬停效果仅作用于数据行。

场景 2：表单验证的样式提示

在表单中，未填写的输入框可能需要红色边框提示，但已填写或无效的字段除外：

/* 为未填写的输入框添加红色边框，排除已填写或无效的字段 */  
input:not(:placeholder-shown):not([disabled]):not([invalid]) {  
  border-color: red;  
}

此示例结合了多个条件：

  • :placeholder-shown：输入框显示占位符时
  • [disabled]：禁用的输入框
  • [invalid]：不符合验证规则的输入框

场景 3：动态内容的样式隔离

当页面动态加载内容时，可以用 :not() 排除已处理过的元素。例如，一个按钮列表中，已点击的按钮需要隐藏：

/* 排除 class 为 "clicked" 的按钮，隐藏其他按钮 */  
button:not(.clicked) {  
  display: none;  
}

:not() 与其他选择器的结合技巧

结合后代选择器：精准定位

可以嵌套选择器，例如为父元素内的非链接文本添加样式：

/* 在 .container 中，所有非 <a> 标签的文本加粗 */  
.container :not(a) {  
  font-weight: bold;  
}

结合属性选择器：条件筛选

例如，为未设置 data-status="completed" 的按钮添加警告样式：

button:not([data-status="completed"]) {  
  border-color: orange;  
}

结合伪类：动态交互增强

与 :hover 或 :focus 结合，实现更复杂的交互：

/* 鼠标悬停时，除当前选中的菜单项外，其他项变灰 */  
nav a:not(.selected):hover {  
  opacity: 0.5;  
}

常见误区与解决方案

误区 1：尝试否定复杂选择器

:not() 的参数必须是简单选择器，不能包含后代选择器或组合选择器。例如：

/* 错误示例：无法否定 div 内的 p 元素 */  
div:not(p) { /* 这个语法无效 */ }

正确方法：使用 :not() 结合标签选择器，或通过父级选择器排除：

div p {  
  /* 默认样式 */  
}  
div > p {  
  /* 排除直接子元素 p 的样式 */  
}

误区 2：否定多个条件时的优先级问题

当需要否定多个条件时，需注意逻辑顺序。例如，排除同时满足 .a 和 .b 类的元素：

/* 错误：否定单个类，无法同时排除两个条件 */  
div:not(.a):not(.b) { ... }

正确方式：使用逻辑运算组合：

div:not(.a.b) { ... }

或者通过 JavaScript 动态处理复杂条件。

进阶技巧：css not 的深度应用

技巧 1：与 @media 媒体查询结合

在响应式设计中，为特定屏幕尺寸排除某些样式：

/* 移动端下，排除导航栏的固定定位 */  
@media (max-width: 768px) {  
  nav:not(.mobile) {  
    position: static;  
  }  
}

技巧 2：动态内容过滤

结合 JavaScript，通过动态添加/移除类名，配合 :not() 实现交互逻辑：

// 当用户点击按钮时，隐藏未选中的选项  
document.querySelector('button').addEventListener('click', () => {  
  document.querySelectorAll('li:not(.selected)').forEach(item => {  
    item.style.display = 'none';  
  });  
});

技巧 3：优化性能与可维护性

避免过度嵌套 :not()，例如：

/* 低效写法：多重否定 */  
div:not(.a):not(.b):not(.c) { ... }

可优化为：

div {  
  /* 默认样式 */  
}  
div.a, div.b, div.c {  
  /* 覆盖样式 */  
}

结论

通过本文对 “css not” 的深入解析，开发者可以掌握 :not() 的基础语法、应用场景及进阶技巧。无论是排除特定元素的样式、优化交互逻辑，还是提升代码可维护性，:not() 都是 CSS 工具箱中不可或缺的“反向过滤器”。

在实际开发中，建议结合具体需求，灵活组合 :not() 与其他选择器，并通过案例实践加深理解。随着对否定选择器的熟练运用，你将能够更精准地控制页面样式，实现高效、优雅的前端解决方案。

通过本文，读者不仅能够掌握 :not() 的核心用法，还能理解其在复杂场景中的价值，从而在 CSS 开发中更加得心应手。

最新发布

查看更多文章