如何在CSS中使用:not()选择器_排除特定元素样式应用

:not()伪类用于选中不满足特定条件的元素，提升样式精确性。例如p:not(.special)选中非.special类的段落，input:not([disabled])选中未禁用的输入框；可链式排除多种情况如.user-item:not(.admin):not(.guest)，但不支持逗号分隔多选择器；常用于避免重复覆盖样式，增强代码可维护性。

CSS 中的 :not() 伪类选择器是一个非常实用的工具，它允许你为**不匹配某个条件的元素**应用样式。使用它可以避免为特定元素重复写覆盖样式，提升代码简洁性和可维护性。

基本语法与作用

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

• p:not(.special) —— 选中所有不是 .special 类的段落
• input:not([disabled]) —— 选中所有未被禁用的输入框
• :not(.hidden) —— 选中所有没有 .hidden 类的元素

排除特定类或状态的元素

当你想对一组元素统一设置样式，但希望跳过某些特殊情况时，:not() 非常有用。

button:not(.submit) {
  margin-right: 10px;
}

这样 .submit 类的按钮就不会有右边距，其他按钮都会应用该样式。

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

结合属性选择器排除特定情况

你可以用 :not() 排除具有特定属性的元素，比如链接中非外部链接的样式处理。

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

279

查看详情

a:not([href*="http"]) {
  text-decoration: underline;
}

这个规则会让所有 href 不包含 "http" 的链接（即站内链接）显示下划线，而外部链接不受影响。

链式使用多个 :not() 条件

可以通过连续使用 :not() 来排除多种情况。

.user-item:not(.admin):not(.guest) {
  opacity: 0.8;
}

注意：不能写成 :not(.admin, .guest)，因为 :not() 不支持逗号分隔的多重选择器（目前仅接受单个参数）。

基本上就这些。合理使用 :not() 能让你的 CSS 更加精准和灵活，特别是在构建组件样式时，能有效减少冗余代码。关键是理解它匹配的是“不符合条件”的元素，逻辑上取反即可。

以上就是如何在CSS中使用:not()选择器_排除特定元素样式应用的详细内容，更多请关注php中文网其它相关文章！