CSS中:not(old)选择器含义解析——关联复选框与单选按钮

核心含义 #

:not(old)是CSS的否定伪类选择器，它的作用是匹配未添加old类名的目标元素。在你的项目里，就是选中所有没有old类的复选框（input[type=checkbox]）和单选按钮（input[type=radio]）。

为什么HTML里没有old类？ #

这是一种预留式的扩展性写法：

• 当前项目中所有表单控件都不需要区分新旧样式，所以没有给任何元素添加old类，此时:not(old)等价于直接选择所有目标控件，所有自定义样式都会生效。
• 如果未来需要给部分控件保留原生样式或旧版自定义样式，只需要给这些控件添加old类，它们就会自动跳过当前的自定义样式规则，无需修改现有CSS代码。

结合你的代码场景 #

你的CSS里用:not(old)配合相邻兄弟选择器（+ label），实现了自定义复选框/单选按钮的样式：

1. 先通过input[type=checkbox]:not(old)把原生控件设为opacity:0隐藏
2. 再用input[type=checkbox]:not(old) + label > span来模拟自定义的控件外观
3. 最后通过:checked伪类实现选中状态的样式变化

这种写法既完成了当前的自定义样式需求，又为未来的样式兼容留好了扩展空间。

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