:not()不支持多参数,需嵌套多个:not()实现并列排除,如button:not(.disabled):not(.hidden);现代浏览器支持:not(a.b)语法排除组合条件,但兼容性需注意;复杂排除应优先用显式类名而非深层:not()嵌套。
css:not()里怎么写多个排除条件
:not() 本身不支持直接写多个参数,比如 :not(.a, .b) 是非法语法,浏览器会直接忽略整个选择器。想排除多个类、属性或状态,必须把每个条件单独套一层 :not(),然后用连写(即隐式 &&)组合。
例如,要选中“既不是 .disabled,也不是 .hidden”的按钮:
button:not(.disabled):not(.hidden) { opacity: 1; }
这等价于逻辑上的 “button && !disabled && !hidden”,不是“! (disabled || hidden)”的取反——但结果一致,因为布尔代数中二者等价。不过注意:这种写法只适用于并列排除,不能表达“排除有 A 属性但没有 B 类”的复合逻辑。
用:not()排除带属性和类的组合条件
如果要排除的是“同时满足多个特征”的元素(比如 input[type="text"].error),不能写成 :not(input[type="text"].error) —— 这在 CSS4 之前是无效的(旧版浏览器如 IE 完全不支持)。现代浏览器(Chrome 85+、Firefox 68+、Safari 14+)已支持,但兼容性仍需确认。
立即学习“前端免费学习笔记(深入)”;
稳妥做法是降级为多层 :not() 套用,并确保选择器顺序不影响特异性: