html - 如何使 css !important 属性仅在一个声明中适用于所有新样式的元素？

Question

我正在使我的博客设计在小屏幕尺寸上响应，但是当我想更改预样式元素的样式时，它仅在将 !important 添加到其 css 样式时才会更改。这是 css 示例 -

  .post {margin-left:10px!important;height:300px!important;}
  .post img {width:200px!important;height:200px!important;}
   a:link {color:green!important;}

HTML-

  <div class='post'> 
  <img src='photo.gif'> Here is the link of a very informative aricle <a href="/">Link</a>
  </div>

这只是一个示例，我的 css 和 html 代码很长。在 css 样式中，您可以看到每个样式都包含 !important 属性。几乎在每个元素的 css 中我都必须添加 !important 否则元素样式将被继承。在 css 中有没有什么方法可以只声明一次 !important 属性并且元素的新样式将在不添加 !important 的情况下工作。

Answer 1

首先，除非只需要，否则不要那样使用 !important。 !Importatn 强制浏览器根据您的需要呈现某些内容。粗心地使用它会导致代码困惑，并让维护网站的任何人都头疼不已。

您应该在需要的地方进行适当的修复。请记住:

内联 css + !important > css 文件 !important > 内联 css > css 文件。

此外，如果您声明某物两次，例如一个类 .some-class{}，则后一个类的属性将覆盖前一个类的属性。但请记住!重要的事情......

我建议您按应做的方式做一次，这样您以后就不会头疼了……

进一步引用:http://www.w3schools.com/css/ & http://www.w3schools.com/css/css_mediatypes.asp