:not伪类用于排除特定元素应用样式，如p:not(.special)使非.special类的段落变蓝，input:not([disabled])为未禁用输入框添加边框，li:not(:last-child)为非最后一项列表添加下边距，可结合类、id、属性等选择器精确控制样式。
在CSS中，:not 伪类是一个非常实用的工具，它允许你为**不匹配特定条件的元素**应用样式。使用 :not() 可以轻松排除某个或某些特定元素，避免它们受到某条样式规则的影响，从而提升样式的精确性和维护性。
基本语法与用法
:not(选择器) 接受一个简单选择器作为参数，匹配所有不符合该选择器的元素。常见的可选参数包括标签名、类、ID、属性选择器等。
示例：-
p:not(.special) { color: blue; }—— 所有不是 .special 类的段落文字变蓝 -
input:not([disabled]) { border: 1px solid gray; }—— 为所有未被禁用的输入框添加边框 -
li:not(:last-child) { margin-bottom: 10px; }—— 列表项中除了最后一个，都添加下边距
排除特定类或ID的元素
当你想对某一类元素统一设置样式，但需要跳过某个特殊个体时，:not 非常有用。
场景举例：
-
button:not(#submit-btn) { background-color: gray; }—— 所有按钮背景为灰色，唯独 ID 为 submit-btn 的按钮不受影响 -
.nav-link:not(.active) { opacity: 0.7; }—— 导航链接中非激活状态的降低透明度
组合使用增强灵活性
:not 可与其他选择器组合，实现更精细的控制。支持多个 :not 连用，也可以结合后代、子元素等选择器。
立即学习“前端免费学习笔记（深入）”；
实用技巧：-
div:not(.card):not(.modal) { padding: 20px; }—— 排除同时具有 .card 和 .modal 类的 div -
ul > li:not(.highlight) + li { margin-top: 5px; }—— 紧接在非 highlight 类后的列表项添加间距 -
*:not(h1):not(h2):not(h3) { font-family: Arial, sans-serif; }—— 为除标题外的所有元素设置字体
基本上就这些。合理使用 :not 能让你的CSS更简洁、逻辑更清晰，尤其适合处理例外情况。注意不要过度嵌套或滥用，以免影响性能和可读性。
