取消一些 CSS 样式

Posted 2023-03-05

【中文标题】取消一些 CSS 样式

【英文标题】：Cancel some CSS Style

【发布时间】：2012-08-03 08:38:48

【问题描述】：

对于一个项目，我必须使用已定义的样式表。我无法编辑它，我必须接受它。

但是，有些样式不适用于本网站（例如边距）。

我也创建了自己的 CSS 文件来覆盖其中的一些属性。

举个例子，如果我有这个：

<div id="main-content" class="container">My test text</div>

在一个 css 文件中还有以下 css 指令：

div.containermargin:5px
div#main-contentmargin-left:235px; ...

我想在我的 css 中定义 div#main-content 没有这个边距，但它是默认值。

我该怎么做？我不想做一个margin-left:0px，因为如果我有一个全局样式（说所有div.container 应该有一个5px 的边距，我希望它适用于我以前的div。这些数据可能会改变。

【问题讨论】：

检查!important

【参考方案1】：

没有任何纯 CSS 方法可以删除属性值声明而不将其显式设置为另一个值。

所以如果你有这样的情况：

 <div id="divA" class="class3 class1"></div>
 <div id="divB" class="class3 class2"></div>

 .class1margin:2px;
 .class2margin:3px;
 .class3margin:10px;

...并且您想取消 class3 的效果，以便 divA 的边距为 2px，而 divB 的边距为 5px，您唯一的纯 CSS 资源将涉及显式引用每个案例。 IE。在您的覆盖样式表中，您必须重新声明：

 .class1margin:2px;
 .class2margin:3px;

...等等，但许多类/选择器上下文可能会受到影响。这恐怕是不现实的。

如果您愿意深入研究 javascript，您实际上可以从元素中删除类名。

有关如何执行此操作的直接 JavaScript 示例，请参阅：Remove CSS class from element with JavaScript (no jQuery)

如果你想要更简单的代码，并且愿意使用 JavaScript 库，jQuery 会让你在一行中做到这一点：

$('divA').removeClass('class3');

【参考方案2】：

您可以添加另一个 css 类，例如 .no-left-margin

<div id="main-content" class="container no-left-margin">My test text</div>

并添加到您的 CSS 中

.no-left-margin
 margin-left: 0px !important;

【讨论】：

有一些由外部库生成的 css 类，我想保留它们的名称。

【参考方案3】：

嘿，现在习惯了

.container#main-contentmargin-left:xxxx; ...

【讨论】：

如果我这样做，我将不得不在每次 div.container 更改时更新这个margin-left。而margin是最简单的可能性

暂时没有，还没有发布。但浮士德的回答确实说明了你的回答如何。

【参考方案4】：

只要您的样式表在原始样式表之后，您就可以在 css 中使用相同的选择器，它会覆盖它。

然后放

div.containermargin:5px
div#main-contentmargin-left:auto;

【讨论】：

#main-content margin-left 会是 5px 吗？因为我不想覆盖它，所以我想让它不在这里（然后他采用任何其他匹配或继承其值的样式）