如何用CSS伪类:not()简化复杂的导航栏排除逻辑？-css教程-PHP中文网

:not() 不能嵌套，如 :not(:not(.active)) 会被浏览器忽略；多个排除应并列书写，如 li:not(.active):not(.disabled)；:not() 内不可用复合选择器，旧版 safari 对 .nav-item.active 支持差；可用属性选择器如 [data-state="active"] 提升兼容性；:not() 不影响 specificity，权重与对应类选择器相同。

如何用css伪类:not()简化复杂的导航栏排除逻辑？

伪类 `:not()` 不能嵌套，别写 `:not(:not(.active))`

很多人想用 :not() 层层排除多个类，比如“除了 .active 和 .disabled 的所有 li”，结果写出 li:not(.active):not(.disabled) 是对的，但写成 li:not(:not(.active)) 就会失效——CSS 规范明确禁止伪类嵌套。浏览器直接忽略整个选择器，导航项样式全部丢失，还查不出错在哪。

正确做法永远是一层 :not() 包一个简单条件，多个排除就并列写：

nav li:not(.active):not(.disabled):not(.divider)

注意顺序无关，但每个 :not() 只能接受一个简单选择器（不能带空格、不能含后代/子代关系）。

`:not()` 里不能用复合选择器，比如 `.nav-item.active`

想排除“同时有 .nav-item 和 .active 的元素”？不行。:not(.nav-item.active) 看似合理，但 CSS 选择器语法里，.nav-item.active 是合法的类组合（表示同时含两个类），所以它能用 —— 但很多老版本 Safari（≤15.4）和旧版 Android WebView 会把它当作非法语法而静默失败。

更稳妥的写法是换思路：不靠 :not() 排除组合类，而是用更基础的类做标记：

给需要特殊处理的项加单独 class，如 nav-item--excluded
用 JS 动态增删 class，避免在 CSS 里硬刚复杂逻辑
真要靠纯 CSS，优先用属性选择器替代，例如 li:not([data-state="active"]) 兼容性更好

用 `:not()` 替代大量 `:first-child` / `:last-child` 边界处理

导航栏常见需求：中间项加左右 border，首尾项只加单边。传统写法要三行：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

nav li { border-left: 1px solid #ccc; }<br>nav li:first-child { border-left: none; }<br>nav li:last-child { border-right: none; }

用 :not() 一行就能收口：

nav li:not(:first-child) { border-left: 1px solid #ccc; }<br>nav li:not(:last-child) { border-right: 1px solid #ccc; }

这种写法更直观——“非首个才画左边线”，语义清晰；而且不用担心新增 DOM 节点后漏掉 :first-child 的重置逻辑。不过要注意：:not(:first-child) 对性能无额外负担，但若搭配 :has() 就得小心，目前 :has() 在部分场景仍触发强制重排。

伪类 `:not()` 不影响 specificity，但容易误判权重

写 nav a:not(.external) 和 nav a.external，前者的 specificity 是 (0,1,1)，后者也是 (0,1,1) —— 它们权重完全一样。如果两个规则冲突，后定义的生效，不是“:not() 更弱”。这点常被忽略，导致排除逻辑失效却以为是语法错了。

排查时记住：