我们正在使用第 3 方支付网关，它的 CSS 与我们的代码相混淆。它添加了以下属性以将所有列设置为填充 0。
[class*=col-] {
padding: 0;
}
我应该如何删除这个填充属性？我不想要这个填充属性。
【问题讨论】：
padding 的问题在于，由于它不能从父级继承，因此使用 padding: unset不会解决你的问题:(
*=选择器。在您的情况下，*=col- 也可能匹配 "racol-1" "tricol-green" 等元素。
[class*=col-] {
padding: initial;
}
确保样式文件链接在第三方文件之后，例如：
<head>
<link rel="stylesheet" href="third party">
<link rel="stylesheet" href="style that have padding initial">
<!--OR-->
<style>
[class*=col-] {
padding: initial;
}
</style>
</head>
当多个声明具有相同的特异性时，CSS 中的最后一个声明将应用于元素。 --- Specificity - Mozilla
如果这不起作用，请在这样的样式后写!important
[class*=col-] {
padding: initial !important;
}
可以使用JS来移除属性：removeProperty()，
或者只是在任何你想要的地方设置填充，最后添加!important。
但是，
当
important规则用于样式声明时，此声明将覆盖任何其他声明。虽然技术上!important与特异性无关，但它直接与之交互。但是，使用!important是一种不好的做法，应该避免使用，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。当两个具有!important规则的冲突声明应用于同一元素时，将应用具有更高特异性的声明。
所以不要仅在您编辑外部插件/库时才使用它：
仅在覆盖外部 CSS（来自外部库，如 Bootstrap 或 normalize.css）的页面特定 CSS 上使用 !important。
【讨论】：
*=而且你的答案是容易出错且不正确。如果某些东西以开头（如您假定的*="col"）而不是使用^="col-"，并且作为后备而不是使用*=" col-"（带有空格前缀） , 一起：[class^="col-"], [class*=" col-"] { /*styles here*/ }
padding: 0; 的选择器不起作用，padding: initial; 的选择器也不起作用，这就是他需要
!important 只会导致更严重的问题和糟糕的样式表编码习惯；应不惜一切代价避免。阅读：developer.mozilla.org/en-US/docs/Web/CSS/Specificity.
!important，因为它可能是唯一的解决方案，在你提供的链接中“仅在覆盖外国 CSS 的页面特定 CSS 上使用 !important （来自外部库，如 Bootstrap 或 normalize.css）“developer.mozilla.org/en-US/docs/Web/CSS/…
您无法真正删除属性。你只能写一个选择器给它一个不同的值。
将其设置为initial 应该使元素恢复其默认值。
它不会导致它恢复到您应用的早期样式。如果需要，则应通过添加它的选择器的 specificty 覆盖原始分配。
【讨论】：
你可以这样做：
.my-class[class] /* for specificity */ {
padding: var(--padding);
}
然后为每个带有.my-class 类的标签创建一个您选择的--padding
.my-element[class] {
padding: [padding]
}
【讨论】：
initial 应该让元素恢复其默认值，但通常您会将其设置为 20px 之类的东西，因为默认值有时会因浏览器而异。跨度>
【讨论】：