css 防止样式(意外全局加载)应用于按钮的安全方法

0dxa2lsx 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(327)

与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的切换：）

谁能告诉我从全局规则中私有化按钮元素的安全方法是什么？

css

来源：https://stackoverflow.com/questions/74945556/safe-way-to-prevent-a-style-accidently-loaded-globally-from-applying-to-a-butt

1条答案

按热度按时间

2guxujil1#

你的第一个问题是你选择了#dont-apply-global-style中的所有元素，原因是*选择器，所以它仍然会将它的样式应用到button元素。
你的第二个问题发生了，因为:not()和其他一些伪选择器将把它的规则中的css特殊性添加到总的特殊性中，所以你的最终特殊性将是1-0-1。
你可以用:where()伪选择器来降低它，它内部的特异性不会被加到总特异性中。

button:where(:not(#c)) {
  width: 130px;
}

.b {
  width: 200px;
}

<button>a</button>
<button class="b">b</button>
<button id="c">c</button>

赞(0）回复(0）举报 2022-12-30

我来回答

css 防止样式(意外全局加载)应用于按钮的安全方法

1条答案

相关问题

热门标签

最新问答