如何为CSS文件中的每个元素添加!important

时间:2012-11-14 00:02:57

标签: html css override

  

可能重复:
  Is there a shortcut for setting !important on every property in a CSS file?

我有一个独特的问题。在css中,!important会覆盖已经声明的任何元素 - 但是假设我希望所有样式覆盖任何其他提到的样式表;好吧,通常我会把覆盖秒放在html文件上,如下所示:

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="override.css">

但由于某种原因,这不起作用。具体来说,我正在做的是添加类来附加基本的CSS样式。像这样:

<div class="no-border-right float-left no-margin-top"></div>

在我的CSS中:

.no-border-right {
    border-right: 0px solid transparent;
}

.float-left {
    float: left;
}

.no-margin-top {
    margin-top: 0;
}

但是,它仍然没有压倒一切。我只想为每个元素添加!important,但问题是,我已经构建了14gb库。 (只有当我感到无聊时,我才会这样做......呵呵:P)所以我想知道如何将!important添加到每个元素中。像:

* {
    ...!important;
}

也许甚至没有...任何想法?

5 个答案:

答案 0 :(得分:1)

sed -i 's/;$/ !important;/' override.css other.css css.css files.css

只是实际添加它们。阅读其他答案,了解为什么!important不是一个好主意,但永远不要说我们没有给你足够的绳索让自己挂起。

答案 1 :(得分:1)

可能你的新选择器没有足够的优先级而不是mystyle.css上的选择器?

CSS/Training/Priority level of selector

CSS: Understanding the selector's priority / specificity

!important会覆盖这些计算,但如果可能的话,应该避免使用标准方法。

答案 2 :(得分:0)

没有简单的方法可以为文件中的每个元素添加重要内容。话虽如此,!important是一个非常糟糕的主意,并且应该仅作为最后的手段,因为它打破了覆盖CSS中样式的自然能力。您需要了解CSS selector specificity这就是为什么您的样式不会覆盖前一个文件中的样式。第一个文件中的样式可能更具体。

请显示mystyle.css

的内容

答案 3 :(得分:0)

这是一个坏主意......请阅读我在下面链接的文章。

尽管如此,答案仍然是否定的,在CSS中无法做到这一点。但是,由于您包含CSS文件的顺序(在HTML中),override.css将优先于mystyle.css。对CSS文件中的每个声明添加重要内容是一种明显的错误。阅读this article by Chris Coyier,了解有关何时使用它的更多详细信息,以及根本不应该使用它的详细信息。

答案 4 :(得分:0)

如果要覆盖上述或实现的样式,请在层次结构中使用更高的选择器。每次更具体时,都会覆盖层次结构中较高的CSS样式。

例如:

HTML:
   <div class="container">
    <div class="old-style stale vintage">
      <div class="new-style override-old-style">
        <div class="no-border-right float-left no-margin-top">
        </div>
       </div>
    </div>   
   </div>

 CSS:
  .no-border-right{border-right: 0px solid transparent;}

  .new-style .float-left{float: left;}

  .old-style .no-margin-top{margin-top: 0;}

.new-style .float-left应覆盖.no-border-right。并且.old-style .no-margin-top应该覆盖这两种样式。如果您尝试使用同一级别的样式,例如.no-border-right .float,则同一级别的样式将被取消。当你在样式表中向下移动时,样式必须有更详细的描述。使用新选择器添加您要覆盖的新样式。我通过在同一站点上工作的开发团队使用的样式表中使用!important来学习这种方法。它不漂亮。

如果必须比类更具体,并且要更改特定元素,请继续使用ID。我知道大多数Web开发人员都看不起它。但是,如果小心处理并且使用不当,它们可以很好地使用。不要和他们发疯。它们很适合用于个性化,模态等。再次,小心处理。

最重要的是,将!important覆盖作为最后的手段。将其视为恐慌按钮。仅在发生可怕的超控紧急情况时使用。