正在重写wordpress！重要的同时仍然能够使用javascript来处理它

Question

我发现了类似的问题，但似乎没有一个涉及到我的特定用例。

我制作了一个自定义网页，用于我的作品WordPress网站。WordPress将自定义代码封装在容器div中，并具有以下CSS:

max-width: 1200px!important
width: 1200px!important;

问题是：

1. 它的集合同样重要，所以为了用css来覆盖它，我必须让我的集合也很重要，而且更具体，因为我从这里的其他帖子中收集到了这一点
2. 我需要能够使用Javascript动态更改宽度，有一个事件会导致这种情况频繁发生
3. 我的div的宽度需要是默认值，它只是随着内容的增加而增加

Answer 1

您可以添加另一个类来覆盖第一个类(它级联(，并将宽度设置为initial。

运行以下代码段并单击div以切换baz类，以查看它是否覆盖foo类。bar类被忽略，因为它被foo中的!important规则覆盖。

const el = document.querySelector("div");
el.addEventListener('click', () => el.classList.contains("baz") ? el.classList.remove("baz") : el.classList.add("baz"));

.foo {
background-color: red !important;
width: 100px !important;
height: 100px !important;
}
.bar {
background-color: green;
}
.baz {
background-color: yellow !important;
width: initial !important;
height: 200px !important;
}

<div class="foo bar baz"></div>