如何用CSS选择器匹配同一元素的多个伪类？验证写法有效性

你的猜想完全正确，input[type="checkbox"]:disabled:not(:checked) 就是符合需求的正确写法，这绝非巧合——CSS允许通过无空格链式拼接伪类的方式，匹配同时满足多个状态的同一个元素。

写法拆解与原理： #

• input[type="checkbox"]：先定位页面上所有复选框元素
• :disabled：从复选框中筛选出处于禁用状态的部分
• :not(:checked)：再排除掉已选中的复选框，最终剩下的就是「未选中+禁用」的目标元素

你也可以调换伪类的顺序，写法完全等价：

input[type="checkbox"]:not(:checked):disabled

这种链式组合伪类是CSS标准明确支持的用法，只要每个伪类都是描述当前元素的状态或特征，就可以这样叠加使用，匹配逻辑稳定可靠。

内容的提问来源于stack exchange，提问作者Daniel Kaplan