:not()仅支持单个简单选择器，排除多个类需重复使用如div:not(.hidden):not(.loading)，其匹配目标是选择器所指元素本身；复杂逻辑建议用js配合classlist处理。
用 :not() 选择器排除带特定类的元素
直接用 :not(.disabled) 就能选中所有不带 disabled 类的元素，但要注意它只作用于单个简单选择器，不能写成 :not(.btn.disabled) 这种复合形式（除非浏览器支持较新语法）。主流浏览器现在都支持 :not() 接单类、属性、伪类等，但不支持后代或组合选择器。
想排除多个类时得嵌套或重复使用 :not()
比如要选“既不是 hidden 也不是 loading”的 div，得写成 div:not(.hidden):not(.loading)。不能简写为 div:not(.hidden, .loading)——CSS 语法不支持逗号分隔多个参数。如果漏掉一个 :not()，就可能把本该排除的元素漏进来。
注意 :not() 的层级和匹配粒度
它匹配的是“当前选择器所代表的元素本身”，不是其子元素。例如 ul:not(.no-bullets) li 表示：先找那些父级 ul 不含 no-bullets 类的 li；但如果写成 ul li:not(.no-bullets)，意思就变成“找所有 li，只要它自己没加 no-bullets 类”，跟父级无关。容易混淆的关键点是：:not() 绑定在哪个元素上，就对哪个元素做判断。
遇到复杂逻辑时，优先考虑 JS 配合 classList
CSS 的 :not() 在面对动态类名、条件组合（如“有 A 类但没有 B 类”）或运行时计算时会力不从心。这时候用 JS 更可靠：
document.querySelectorAll('div').filter(el => !el.classList.contains('disabled') && el.classList.contains('active'))
尤其是当类名由框架（React/Vue）动态增删、或需结合数据状态判断时，硬靠 CSS 选择器容易漏判或误判。别为了“纯 CSS”牺牲可读性和可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
