与this question类似,我希望ID为dont-apply-global-style-1
的按钮不应用width: 130px
,因此我将css规则label, input, button: { width: 130px }
更改为:
label,
input,
button:not(#dont-apply-global-style-1 *) {
width: 130px;
}
但是不起作用,下面的按钮仍然适用width: 130px
:
此外,我看到没有id dont-apply-global-style-1
的切换(Toggle
)也适用于width: 130px
,似乎这些规则现在具有优先级,这在以前没有发生过。
(在更改规则之前不使用id dont-apply-global-style-1
进行切换:)
(更改规则后不使用id dont-apply-global-style-1
的切换:)
谁能告诉我从全局规则中私有化按钮元素的安全方法是什么?
1条答案
按热度按时间2guxujil1#
你的第一个问题是你选择了
#dont-apply-global-style
中的所有元素,原因是*
选择器,所以它仍然会将它的样式应用到button
元素。你的第二个问题发生了,因为
:not()
和其他一些伪选择器将把它的规则中的css特殊性添加到总的特殊性中,所以你的最终特殊性将是1-0-1
。你可以用
:where()
伪选择器来降低它,它内部的特异性不会被加到总特异性中。