Question

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

但是，有些风格对于本网站来说是不够的（例如保证金）。

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

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

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

以下css文件中的css指令：

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

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

我怎么能这样做？我不想做margin-left:0px，因为如果我有一个全局风格（说所有div.container应该有5px的余量，我希望它适用于我以前的div。并且数据可能是变化

Answer 1

如果没有明确地将其设置为其他值，则没有纯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资源将涉及明确引用每个案例。 I.E.在你的重写样式表中，你必须重新断言：

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

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

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

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

如果您想要更简单的代码，并且愿意使用JavaScript库，jQuery将允许您在这样的一行中执行此操作：

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

Answer 2

嘿，现在习惯了这个

.container#main-content{margin-left:xxxx; ...}

Answer 3

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

然后就把

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

Answer 4

您可以添加另一个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样式

4 个答案: