使用 :not() 伪类可排除特定元素应用样式，如 li:not(:first-child) 使非首个 li 变红，a:not(:visited) 为未访问链接加下划线，.item:not(:hover) ~ .item 在悬停时降低后续兄弟透明度，input:not(:focus) 设置非聚焦输入框边框色，button:not(:disabled) 为非禁用按钮添加过渡，nav a:not(:active):not(:hover) 给非当前页菜单项设悬停效果，关键在于合理搭配简单选择器并避免复杂嵌套。
使用 :not() 伪类结合其他伪类可以灵活地排除特定元素，只对符合条件的元素应用样式。关键是理解 :not() 的参数支持大多数简单选择器，包括伪类。
基本语法与限制
:not(选择器) 否定匹配括号内的选择器。它只能包含一个简单选择器，比如类型、类、属性、伪类等，但不能包含复合或复杂选择器（如后代、兄弟等）。
常见组合用法
通过组合 :not() 和伪类，可以排除具有某种状态或位置的元素。
-
排除第一个或最后一个子元素：
li:not(:first-child) { color: red; }
所有非第一个li文字变红。 -
排除已访问链接：
a:not(:visited) { text-decoration: underline; }
只对未访问的链接加下划线。 -
排除悬停状态的兄弟元素：
.item:not(:hover) ~ .item { opacity: 0.5; }
当某个 .item 被悬停时，其后的所有非悬停 .item 透明度降低。 -
排除带焦点的输入框：
input:not(:focus) { border-color: #ccc; }
非聚焦状态的输入框使用浅色边框。
实用场景示例
假设有一组按钮，想让除了“禁用”状态外的所有按钮添加过渡效果：
立即学习“前端免费学习笔记（深入）”；
button:not(:disabled) { transition: all 0.3s; }
或者在导航中，给所有非当前页的菜单项添加鼠标悬停效果：
nav a:not(:active):not(:hover) { color: #333; }
基本上就这些。关键是选对伪类，写清逻辑，避免嵌套复杂结构。不复杂但容易忽略细节。
