取消部分CSS样式

2023-12-26

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

但是,有些样式不适合该网站(例如边距)。

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

举个例子,如果我有这个:

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

以及 css 文件中的以下 css 指令:

div.container{margin:5px}
div#main-content{margin-left:235px; ...}

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

我怎样才能做到呢?我不想做一个margin-left:0px因为如果我有一个全球风格(也就是说所有div.container应该有 5px 边距,我希望它适用于我以前的 div。这些数据可能会改变。


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

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

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

 .class1{margin:2px;}
 .class2{margin:3px;}
 .class3{margin:10px;}

...并且您想要取消 class3 的效果,以便 divA 的边距为 2px,divB 的边距为 5px,您唯一的纯 CSS 资源将涉及显式引用每种情况。 IE。在您的重写样式表中,您必须重新断言:

 .class1{margin:2px;}
 .class2{margin:3px;}

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

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

有关如何执行此操作的直接 JavaScript 示例,请参阅:使用 JavaScript 从元素中删除 CSS 类(无 jQuery) https://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery

如果您想要更简单的代码,并且愿意使用 JavaScript 库,jQuery 将允许您在一行中完成此操作,如下所示:

$('divA').removeClass('class3');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

取消部分CSS样式 的相关文章