在css样式开发中，我们常常需要给页面中特定范围的元素设置统一样式，比如给除按钮之外的所有可交互元素添加统一的点击反馈效果，或者给非按钮的块级元素设置统一的边距。这时候如果逐个给非按钮元素写选择器会非常繁琐，而使用:not伪类可以轻松实现反选所有按钮之外的元素的需求。
:not伪类的基本语法
:not伪类是css3引入的否定伪类，用于匹配不符合括号内选择器的元素，语法格式如下：
/* 基本语法：选择所有不匹配selector的元素 */
:not(selector) {
属性: 值;
}
其中selector可以是任意有效的css选择器，比如元素选择器、类选择器、id选择器、属性选择器等，但是不支持嵌套使用:not伪类，也不支持包含多个选择器的组合（如果需要匹配多个排除条件，可以链式使用:not）。
反选所有按钮之外元素的具体实现
按钮在html中通常使用<button>标签或者带有特定类的元素实现，我们可以根据实际场景选择对应的排除规则。
场景1：排除所有原生button标签元素
如果页面中的按钮都是原生<button>标签，那么可以直接使用:not(button)来匹配所有非按钮元素：
/* 给所有非button标签的元素设置统一的背景色 */
:not(button) {
background-color: #f5f5f5;
}
/* 也可以结合其他选择器缩小范围，比如只给body下的非按钮元素设置样式 */
body :not(button) {
margin: 8px 0;
}
场景2：排除自定义按钮类的元素
如果页面中的按钮是通过类来定义的，比如所有按钮都带有btn类，那么可以排除该类对应的元素：
/* 给所有不带btn类的元素设置统一的边框样式 */
:not(.btn) {
border: 1px solid #e0e0e0;
}
/* 链式排除多个条件，同时排除button标签和btn类的元素 */
:not(button):not(.btn) {
padding: 4px 8px;
}
场景3：排除特定属性定义的按钮
有些按钮会通过type="button"属性定义在input标签上，这时候可以结合属性选择器排除：
/* 排除所有type为button的input元素，以及其他按钮 */
:not(input[type="button"]):not(button):not(.btn) {
font-size: 14px;
}
使用:not伪类的注意事项
- :not伪类的优先级和其内部选择器的优先级一致，比如:not(.btn)的优先级和.btn类选择器相同，需要注意样式覆盖的问题。
- :not伪类不支持逗号分隔的选择器列表，比如:not(button, .btn)是无效的，需要写成:not(button):not(.btn)的链式形式。
- 如果需要排除的元素范围比较广，建议先给需要设置样式的元素加一个公共类，再结合:not伪类排除按钮，这样匹配效率更高，也更容易维护。
- 在旧版本浏览器（如IE8及以下）中不支持:not伪类，如果需要兼容旧浏览器，建议使用js实现反选逻辑，或者给非按钮元素统一加一个类来设置样式。
实际案例演示
下面是一个完整的html示例，演示如何给页面中除按钮之外的所有元素添加统一的鼠标悬停效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>:not伪类反选示例</title>
<style>
/* 给所有非按钮元素添加悬停效果 */
:not(button):not(.custom-btn) {
transition: background-color 0.2s;
}
:not(button):not(.custom-btn):hover {
background-color: #e8f4ff;
}
/* 按钮样式 */
button, .custom-btn {
padding: 6px 16px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.custom-btn {
display: inline-block;
}
</style>
</head>
<body>
<h3>普通文本标题</h3>
<p>这是一段普通段落内容</p>
<div>这是一个div容器</div>
<button>原生按钮</button>
<span class="custom-btn">自定义按钮</span>
<input type="text" placeholder="输入框">
</body>
</html>
在这个示例中，鼠标悬停在标题、段落、div、输入框上时都会触发背景色变化，而两个按钮元素不会有这个效果，实现了反选所有按钮之外元素的需求。