:not([disabled]) 选择器用于排除带 disabled 属性的元素，使样式仅作用于未禁用的表单控件。常用于按钮、输入框等场景，如为可点击按钮添加 hover 效果：button:not([disabled]):hover { background-color: #005fcc; color: white; }，并为可用输入框设置聚焦边框 input:not([disabled]):focus { border: 2px solid #007cba; }，提升交互体验。该选择器仅检测 HTML 属性是否存在，不识别 JavaScript 动态禁用状态，且需注意 IE 不支持 :not() 的兼容性问题。
![如何在css中使用:not([disabled])选择器_排除禁用元素应用通用样式](https://img.php.cn/upload/article/000/969/633/176423940756626.jpeg)
在CSS中，:not([disabled]) 选择器用于排除带有 disabled 属性的元素，使样式仅应用于未禁用的元素。这在处理表单控件（如按钮、输入框）时非常实用，可以避免对禁用状态的元素应用交互样式。
基本语法与作用
:not([disabled]) 是一个否定伪类选择器，它匹配所有不包含 disabled 属性的元素。常用于按钮、输入框等表单元素上，确保只有可操作的元素获得特定样式。
例如，只想给可点击的按钮添加悬停效果：
button:not([disabled]):hover {
background-color: #005fcc;
color: white;
}
这样，当按钮被禁用时，即使鼠标悬停也不会触发该样式。
立即学习“前端免费学习笔记（深入）”；
常见使用场景
以下是一些典型应用场景：
- 按钮样式控制：为启用的按钮添加背景色或边框，禁用状态则保持灰暗。
- 输入框交互增强：只对可编辑的输入框添加聚焦效果（focus）。
- 链接或自定义控件：在自定义组件中模拟禁用行为，避免不必要的交互样式。
示例：为可用输入框添加聚焦边框
input:not([disabled]):focus {
border: 2px solid #007cba;
outline: none;
}
注意事项与兼容性
使用 :not([disabled]) 时需注意以下几点：
- 该选择器只检测 HTML 中是否写有 disabled 属性，不会识别通过 JavaScript 动态设置的禁用状态（除非属性同步更新）。
- CSS 的 :not() 支持现代浏览器，IE 不支持 :not()，需考虑兼容性需求。
- 可与其他选择器组合使用，如 button.primary:not([disabled])，精确控制样式范围。
基本上就这些。合理使用 :not([disabled]) 能让样式更智能，提升用户体验，同时减少冗余代码。
