CSS选择器:not()带逗号与不带逗号的差异及写法疑问

1. :not(:disabled :read-only) 和 :not(:disabled, :read-only) 的本质区别 #

这俩是逻辑完全不同的选择器，Chrome把它们同等对待大概率是解析异常（也可能是你手滑把:not(:disabled):not(:read-only)写成了:not(:disabled :read-only)？）：

• :not(:disabled :read-only)：这里的:disabled :read-only是后代选择器，指「被禁用元素的后代中，带只读属性的元素」，整个:not()的作用是排除这类后代元素，和当前元素本身是否禁用、只读无关。
• :not(:disabled, :read-only)：这里的逗号是:not()的多参数写法（CSS4新规范），意思是排除所有「禁用状态」或者「只读状态」的元素，最终匹配的是「既不禁用也不只读」的元素。

2. :not(:disabled):not(:read-only) 和 :not(:disabled, :read-only) 的区别 #

从功能上看，在支持CSS4多参数:not()的现代浏览器里，这俩效果完全一致——简单说，排除「禁用或只读」的元素，和先排除禁用元素、再排除只读元素，结果是相同的。

有人建议用前者的核心原因是兼容性：

• :not(:disabled):not(:read-only)：只要支持:not()的浏览器（比如IE9及以上、各种旧版Chrome/Firefox）都能识别，兼容性拉满。
• :not(:disabled, :read-only)：是CSS4新增语法，旧浏览器（比如IE全系列、Chrome 61之前版本、Firefox 54之前版本）不支持，会直接忽略整个选择器。

关于你测试的几个等式结论 #

你的测试结果完全符合逻辑：

• &:not(:disabled), &:not(:read-only)：这是两个选择器的并集，意思是「不是禁用的元素 或者 不是只读的元素」——除了同时处于禁用+只读状态的元素，其他所有元素都会被匹配到，和&:not(:disabled, :read-only)（只匹配「既不禁用也不只读」的元素）完全不是一回事，自然不等价。
• &:not(:disabled):not(:read-only) 和 &:not(:disabled, :read-only)：在现代浏览器里功能等价，你测试出不等价可能是测试场景有问题，或者用了不支持多参数:not()的旧浏览器？

内容的提问来源于stack exchange，提问作者Kunal Tanwar