:not()伪类可选中不满足条件的元素，用于排除特定类、标签或状态，如p:not(.highlight)设置非高亮段落颜色，.card:not(:last-child)为非最后一个卡片添加下边距，button:not(.disabled):hover仅对非禁用按钮应用悬停样式，提升CSS简洁性与维护性。
在CSS中，:not() 伪类是一个非常实用的选择器，它允许你选中不符合特定条件的元素。通过它，你可以轻松排除某些元素，从而更灵活地控制样式，比如调整边距、颜色等，而无需额外添加类名或修改HTML结构。
使用 :not() 排除特定元素
:not() 接受一个简单选择器作为参数，匹配所有不满足该条件的元素。常见用法包括排除某个类、标签或属性。
例如，你想给所有不是 .highlight 的段落设置默认颜色：
p:not(.highlight) {
color: #333;
}
这样，带有 class="highlight" 的段落就不会应用这个颜色样式。
立即学习“前端免费学习笔记（深入）”；
结合 :not() 调整元素边距
在布局中，经常需要为一组元素设置统一的外边距，但排除第一个或最后一个元素以避免多余的空白。:not() 可以很好地解决这个问题。
比如，你有一组卡片，希望每个卡片之间有间距，但最后一个不需要下边距：
.card:not(:last-child) {
margin-bottom: 16px;
}
这表示：除了最后一个 .card，其他都加上底部边距。相比使用 :nth-child 或额外的类，这种方式更简洁直观。
同样，可以排除第一个元素来取消顶部边距：
.item:not(:first-child) {
margin-top: 8px;
}
组合使用 :not() 控制颜色和其他样式
你可以将多个条件组合在 :not() 中（注意：目前仅支持单个选择器，不能嵌套复杂表达式），但可以通过链式使用实现更精细的控制。
例如，排除禁用状态的按钮，并设置激活样式：
button:not(.disabled):hover {
background-color: #007bff;
color: white;
}
这样，只有非禁用按钮在悬停时才会变色。
再比如，在导航链接中，为非当前页的链接设置特定颜色：
.nav-link:not(.active) {
color: #555;
}
基本上就这些。合理使用 :not() 能让你的CSS更简洁、更具可维护性，特别是在处理列表、表单、按钮组等重复结构时特别有用。关键是理解它的逻辑——“选中不是……的元素”，然后针对性地应用样式。不复杂但容易忽略。
