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 类的 <p> 标签文字颜色为灰色。.highlight 类的段落则不受影响。

? 注意：

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

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

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

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

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

Android 本地数据存储 中文WORD版

本文档主要讲述的是Android 本地数据存储；对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说，能够在移动设备上本地存储数据是一种非常关键的功能。作为一名开发人员，您经常需要存储诸如用户首选项或应用程序配置之类的信息。您还必须根据一些特征（比如访问可见性）决定是否需要涉及内部或外部存储器，或者是否需要处理更复杂的、结构化的数据类型。跟随本文学习 Android 数据存储 API，具体来讲就是首选项、SQLite 和内部及外部内存 API。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以

0

查看详情

? 小技巧：

• 避免过度嵌套，否则会影响可读性和性能。
• 如果否定的条件太多，可能要考虑换个方式组织 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() 看起来不复杂，但在实际项目中用好了可以少写很多冗余代码。关键是要理解它的限制和适用范围，别把它当成万能钥匙就行。

以上就是CSS否定伪类选择器：not()函数的应用的详细内容，更多请关注php中文网其它相关文章！