如何安全阻止全局CSS样式应用到指定按钮？

直接把你的CSS规则改成下面这样就行：

label,
input,
button:not(#dont-apply-global-style-1) {
    width: 130px;
}

为啥你原来的写法不行？ #

你写的button:not(#dont-apply-global-style-1 *)里的*是指该ID元素的后代元素，相当于你要排除的是#dont-apply-global-style-1里面嵌套的按钮，而不是ID本身就是dont-apply-global-style-1的按钮，所以目标按钮还是会被加上宽度；同时这个错误的选择器等于没排除任何按钮，导致原本不受影响的Toggle按钮也被纳入了规则范围，自然会应用上宽度样式。

额外提醒 #

这个写法的优先级和你最初的button选择器一致，不会因为:not()提升权重，所以如果目标按钮之后有其他更具体的样式规则，也能正常生效，不会出现样式冲突问题。

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