如何用css:not伪类排除特定元素

:not伪类用于选中不满足条件的元素，如p:not(.special)排除特定类，input:not([disabled])排除禁用状态，li:not(:last-child)排除最后一个子元素，可结合标签、类、属性等选择器精准控制样式，支持多条件排除如div:not(.warning, .error, [hidden])，提升CSS简洁性与可维护性。

CSS 的 :not 伪类非常实用，它允许你选中不符合指定条件的元素。换句话说，你可以用它来“排除”某些特定元素，让样式只作用于其余元素。使用方法简单灵活，特别适合在不修改 HTML 结构的情况下进行精准样式控制。

基本语法

:not(选择器) 会匹配所有不满足括号内选择器条件的元素。括号里可以是标签名、类名、ID、属性选择器等。

• p:not(.special)

  登录后复制
  ：选中所有不是 .special 类的 p 元素

• input:not([disabled])

  登录后复制
  ：选中所有未被禁用的 input 元素

• li:not(:last-child)

  登录后复制
  ：选中除最后一个以外的所有 li 元素

排除带有特定类的元素

当你想对某类元素统一设置样式，但想跳过其中具有某个类的元素时，:not 非常有用。

div:not(.highlight) {
  background-color: #f0f0f0;
}

这个规则会给所有 div 添加浅灰色背景，但不会影响 class="highlight" 的 div。

立即学习“前端免费学习笔记（深入）”；

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

排除特定标签或状态

你可以结合其他伪类或标签名来更精确地排除元素。

• a:not(:visited)

  登录后复制
  ：给未访问过的链接设置样式

• button:not(.primary)

  登录后复制
  ：对非主要按钮应用默认样式

• :not(.hidden)

  登录后复制
  ：选中所有没有 .hidden 类的元素（可用于批量显示）

组合多个排除条件

虽然 :not 不支持在单个伪类中写多个选择器（如

:not(.a, .b)

div:not(.warning, .error, [hidden]) {
  border: 1px solid green;
}

这条规则会为既不是 .warning、也不是 .error、且没有 [hidden] 属性的 div 添加绿色边框。

基本上就这些。掌握 :not 能让你的 CSS 更简洁、更具可维护性，避免不必要的重复类名或内联样式。关键是理解它的逻辑是“取反”，然后根据需要组合类、属性或伪类即可。不复杂但容易忽略。

以上就是如何用css:not伪类排除特定元素的详细内容，更多请关注php中文网其它相关文章！