css选择器与not伪类组合使用-css教程-PHP中文网

css选择器与not伪类组合使用

P粉602998670

发布： 2025-10-30 21:03:02

原创

169人浏览过

:not伪类用于选择不匹配指定条件的元素，语法为:not(选择器)，可排除特定类、标签、属性或状态元素，支持链式调用和多参数（现代浏览器），但不可嵌套:not或包含伪元素，常用于精准控制样式范围，提升代码简洁性与可维护性。

css选择器与not伪类组合使用

CSS 中的 :not 伪类非常实用，它允许你选择不匹配某个选择器的元素。当你将 :not 与其他选择器组合使用时，可以更精确地控制样式应用范围，避免不必要的重复代码。

:not(选择器) 表示“除了匹配该选择器的元素之外的所有元素”。括号内可以是简单选择器，如类型、类、ID、属性选择器或伪类。

注意：:not() 内部不能嵌套另一个 :not()，也不能包含伪元素。

下面是一些实际开发中常用的 :not 组合方式：

排除特定类的元素

立即学习“前端免费学习笔记（深入）”；

如果你想给所有 div 添加边框，但排除带有 .no-border 的 div：

div:not(.no-border) {
border: 1px solid #ccc;
}

排除特定标签类型

比如给表单中除 submit 按钮外的所有 input 添加样式：

AI图像编辑器

使用文本提示编辑、变换和增强照片

input:not([type="submit"]) {
padding: 8px;
}

结合属性选择器过滤

为没有 required 属性的输入框设置浅色边框：

input:not([required]) {
border-color: #ddd;
}

排除已激活或禁用状态

只对未被禁用的按钮应用悬停效果：

button:not(:disabled):hover {
background-color: #007bff;
}

:not 可以链式使用，实现更复杂的筛选逻辑：

/* 排除 .hidden 类且不是 display:none 的元素 */ *:not(.hidden):not([style*="display:none"]) {
opacity: 1;
}

支持多个选择器（需浏览器支持）：

/* 排除 span 和 .skip 元素 */ p:not(span, .skip) {
font-size: 16px;
} 注意：多参数写法在较新版本浏览器中才支持，旧版可能只接受单个选择器。

基本上就这些。合理使用 :not 能让 CSS 更简洁灵活，关键是理解它只接受简单选择器，并注意兼容性问题。不复杂但容易忽略细节。

以上就是css选择器与not伪类组合使用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：