对于一个项目,我必须使用定义的样式表。我无法对其进行编辑,我必须接受它。
但是,有些样式不适用于此网站(例如,边距)。
我也创建了自己的CSS文件,该文件将覆盖其中的某些属性。
一个例子,如果我有这个:
<div id="main-content" class="container">My test text</div>
Run Code Online (Sandbox Code Playgroud)
以及css文件中的以下css指令:
div.container{margin:5px}
div#main-content{margin-left:235px; ...}
Run Code Online (Sandbox Code Playgroud)
我想在MY 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;}
Run Code Online (Sandbox Code Playgroud)
...并且您想要取消 class3 的效果,以便 divA 的边距为 2px,divB 的边距为 5px,您唯一的纯 CSS 资源将涉及显式引用每种情况。IE 在你的重写样式表中,你必须重新断言:
.class1{margin:2px;}
.class2{margin:3px;}
Run Code Online (Sandbox Code Playgroud)
...等等,但是许多类/选择器上下文可能会受到影响。这可能是不现实的。
如果您愿意深入研究 JavaScript,您实际上可以从元素中删除类名。
有关如何执行此操作的直接 JavaScript 示例,请参阅:使用 JavaScript 从元素中删除 CSS 类(无 jQuery)
如果您想要更简单的代码,并且愿意使用 JavaScript 库,jQuery 将允许您在一行中完成此操作,如下所示:
$('divA').removeClass('class3');
Run Code Online (Sandbox Code Playgroud)