重置特定div的CSS样式

Question

我有一个Wordpress链接到几个CSS文件。我有一个特定的div，它有自己的自定义样式（与主要的Wordpress样式无关）。然而Wordpress CSS弄乱了我的自定义div的风格。在HTML / CSS / Javascript / jQuery中是否有任何方法可以告诉某个HTML元素只是忽略所有以前的样式？

我试过使用CSS重置样式表（http://www.cssreset.com/），他们过滤掉了一些Wordpress样式，但我的大部分自定义div仍然是一团糟。

Answer 1

您始终可以直接在元素上设置特定的css样式。直接应用于dom元素的样式将始终优先于任何样式表中指定的样式。

例

<div id="myid"></div>

通过JavaScript将颜色样式直接应用于此元素

document.getElementById('myid').style.color = "#FF0000";

如果另一段JavaScript在一段时间之后改变了所述属性，那么唯一会覆盖它的东西。

如果样式表声明它们很重要，则可能需要执行此操作

document.getElementById('myid').style.color = "#FF0000 !important";

Answer 2

您可以在要隔离的元素上添加更多类，并通过将其类链接在一起在CSS中选择它。

例如，对于以下四个<div>元素：

.container {
    width: 50px;
    height: 50px;
    margin: 1em;
    border: 1px solid black;
}

/* You can add more properties. */
.red.container {
    background: red;
}

/* You can overwrite properties. */
.round.red.container {
    border-radius: 100%;
    border-color: red;
}

/* You can remove properties. */
.blank.round.red.container {
    border-radius: unset;
    background: unset;
    margin: unset;
}

<div class="container"></div>
<div class="red container"></div>
<div class="round red container"></div>
<div class="blank round red container"></div>