CSSnot()函数实用教程与技巧

一分耕耘，一分收获！既然都打开这篇《CSS not()函数详解与实战应用》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

CSS中的:not()伪类选择器用于选中不符合特定条件的元素，能有效简化样式规则。1.基础用法：可排除特定类名如p:not(.highlight)设置非.highlight段落颜色；2.多重否定：通过嵌套实现多个排除如div:not(.red):not(.blue)设置背景色；3.属性结合：搭配属性选择器如button:not([type="submit"])设置非提交按钮样式；4.实际应用：简化列表样式如.menu-item:not(:last-child)设置除最后一个菜单项外的右边距，提升布局灵活性。

CSS 中的 :not() 伪类选择器是一个非常实用但容易被低估的工具。它允许我们选中不符合某个条件的元素，从而简化样式规则，避免重复书写代码。

比如你想给所有不是 .active 的按钮添加一个默认样式，就可以用 :not(.active) 来实现。这种方式比写多个选择器更简洁、直观。

下面来看几个常见的使用场景和技巧。

基础用法：排除特定类名

:not() 最常见的用途是排除具有某个类的元素。例如：

p:not(.highlight) {
  color: gray;
}

上面这段代码的意思是：所有不是 .highlight 类的

标签文字颜色为灰色。.highlight 类的段落则不受影响。

? 注意：

• :not() 只能接受一个选择器作为参数，不能写多个（比如不能写成 :not(.a, .b)）。
• 参数可以是类、属性、伪类等，比如 :not([disabled]) 或 :not(:first-child)。

多重否定？不支持，但可以嵌套

:not() 本身不支持多个条件，但你可以通过嵌套来实现“多重否定”。比如要选中既不是 .red 也不是 .blue 的元素：

div:not(.red):not(.blue) {
  background: green;
}

这样写就能实现“排除 red 和 blue 类”的效果。

? 小技巧：

• 避免过度嵌套，否则会影响可读性和性能。
• 如果否定的条件太多，可能要考虑换个方式组织 HTML 结构或类名。

与属性选择器结合使用

有时候我们需要对某些属性值做排除，这时候 :not() 搭配属性选择器就很有用了。

比如想让所有不是 type="submit" 的按钮有某种样式：

button:not([type="submit"]) {
  background-color: #eee;
}

这在表单样式统一处理时特别有用，可以快速区分不同类型的按钮。

? 常见搭配还有：

• input:not([readonly])
• a:not([href^="#"])

实际应用：简化列表样式

在写导航栏或者菜单的时候，经常会遇到“最后一个元素不需要边框”这种需求。虽然可以用 :last-child，但有时结构并不稳定。这时也可以用 :not() 来处理：

.menu-item:not(:last-child) {
  margin-right: 10px;
}

这样除了最后一个菜单项外，其他都会有一个右边距。虽然看起来简单，但在响应式布局中很实用。

? 提示：如果结构会变化，建议还是优先考虑 Flex 或 Grid 的 spacing 属性，减少对选择器的依赖。

基本上就这些。:not() 看起来不复杂，但在实际项目中用好了可以少写很多冗余代码。关键是要理解它的限制和适用范围，别把它当成万能钥匙就行。

理论要掌握，实操不能落！以上关于《CSSnot()函数实用教程与技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！