Question

我有一个链接到几个CSS文件的Wordpress。我有一个特定的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>

重置特定div的CSS样式

2 个答案: