如何用css:not与伪类组合排除元素

使用 :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() 内使用 :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; }

基本上就这些。关键是选对伪类，写清逻辑，避免嵌套复杂结构。不复杂但容易忽略细节。