CSS :not 伪类
在 CSS 中，:not 伪类是一个非常强大的工具，它允许你选择不匹配特定选择器的元素。通过使用 :not，你可以更精确地控制哪些元素应该应用样式，从而避免重复编写复杂的 CSS 规则。
什么是 :not 伪类？
:not 伪类是一个功能性伪类，它接受一个简单的选择器作为参数，并匹配不满足该选择器的元素。它的语法如下：
css
:not(selector)
其中，selector 可以是任何有效的简单选择器（如类选择器、ID 选择器、元素选择器等）。
备注
:not 伪类只能接受简单选择器，不能接受复杂选择器（如 div p 或 a:hover）。
基本用法
假设你有一个包含多个段落的 HTML 文档，你希望为所有段落设置字体颜色为蓝色，但排除类名为 special 的段落。你可以使用 :not 伪类来实现：
html
<p>这是一个普通段落。</p>
<p class="special">这是一个特殊段落。</p>
<p>这是另一个普通段落。</p>
css
p:not(.special) {
color: blue;
}
输出效果：
- 第一个段落和第三个段落的字体颜色为蓝色。
- 第二个段落（类名为
special）的字体颜色保持不变。
组合使用 :not 伪类
你可以将 :not 伪类与其他选择器组合使用，以实现更复杂的样式控制。例如，假设你想选择所有不是 div 且没有 hidden 类的元素：
css
:not(div):not(.hidden) {
border: 1px solid black;
}
这个规则会为所有非 div 元素且没有 hidden 类的元素添加黑色边框。
实际应用场景
1. 排除特定按钮样式
在表单中，你可能希望为所有按钮设置默认样式，但排除提交按钮：
html
<button>普通按钮</button>
<button type="submit">提交按钮</button>
<button>另一个普通按钮</button>
css
button:not([type="submit"]) {
background-color: #ccc;
padding: 10px 20px;
}
效果：
- 普通按钮会应用灰色背景和内边距。
- 提交按钮保持默认样式。
2. 排除特定列表项
在一个导航菜单中，你可能希望为所有列表项设置样式，但排除当前活动的项：
html
<ul>
<li>首页</li>
<li class="active">关于我们</li>
<li>联系我们</li>
</ul>
css
li:not(.active) {
color: gray;
}
效果：
- 非活动列表项的文字颜色为灰色。
- 活动列表项的文字颜色保持不变。
注意事项
- 性能问题：虽然
:not伪类非常有用，但在处理大量元素时，过度使用可能会导致性能问题。尽量保持选择器的简洁性。 - 浏览器兼容性：
:not伪类在现代浏览器中得到了广泛支持，但在某些旧版浏览器中可能存在兼容性问题。建议在使用时检查目标浏览器的支持情况。
总结
:not 伪类是 CSS 中一个非常有用的工具，它允许你通过排除特定元素来更灵活地应用样式。通过结合其他选择器，你可以创建出非常精确的样式规则，从而提升代码的可维护性和可读性。
附加练习
- 尝试为你的网页中的所有链接设置样式，但排除指向外部网站的链接（假设外部链接的 URL 以
http开头）。 - 创建一个表单，为所有输入框设置边框样式，但排除类型为
checkbox的输入框。
通过练习，你将更好地掌握 :not 伪类的使用技巧，并能够在实际项目中灵活应用。