重置特定 div 的 CSS 样式

Posted 2023-02-22

【中文标题】重置特定 div 的 CSS 样式

【英文标题】：Reset CSS style for specific div

【发布时间】：2013-04-12 23:32:57

【问题描述】：

我有一个链接到几个 CSS 文件的 Wordpress。我有一个特定的 div，它有自己的自定义样式（与主要的 Wordpress 样式无关）。然而，Wordpress CSS 搞乱了我自定义 div 的样式。在 html/CSS/javascript/jQuery 中有什么方法可以告诉某个 HTML 元素简单地忽略所有以前的样式？

我尝试使用 CSS 重置样式表 (http://www.cs-s-reset.com/)，它们过滤掉了一些 Wordpress 样式，但我的大部分自定义 div 仍然一团糟。

【问题讨论】：

更简单的方法是在单独的 iframe 中显示该 DIV

【参考方案1】：

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

示例

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

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

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

只有在一段时间后另一段 JavaScript 更改所述属性时才会覆盖此属性。

如果样式表声明它们很重要，您可能需要这样做

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

【讨论】：

Wordpress 正在设置成千上万的东西。我尝试重置，但无法重置所有内容

那么就没有灵丹妙药了。您也许可以编辑 wordpress 样式表。

【参考方案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>