Question

我在Joomla工作，第三方附带的CSS有以下引起冲突的CSS代码，我被告知要删除它：

[class*="span"] {
     float: left;
     margin-left: 20px;
     min-height: 1px;
}

我不想从第三方组件的“核心”中删除它，因为当更新进来时，它会覆盖它。我通常放入CSS，我想在模板的custom.css文件中覆盖！important并且有效。

有没有办法，也许使用！important来做相当于删除上面的CSS代码块，这样它就不起作用了？我不是CSS专家，但是有没有办法将它放在custom.css中，这会使这个CSS块无法运行，所以它不会干扰？谢谢！

Answer 1

是

[class*="span"] {
     float: none !important;
     margin-left: none !important;
     min-height: none !important;
}

但是，除非有一个JS插件在页面加载时加载CSS，否则没有必要。在第三方版本之后加入CSS ，您应该始终这样做。

[class*="span"] { float: none; margin-left: none; min-height: none; }

示例HTML

<link href="/css/joomla.css" rel="stylesheet" /> <link href="/css/third-party.css" rel="stylesheet" /> <link href="/css/custom.css" rel="stylesheet" />

custom.css规则将覆盖第三方CSS规则。

Answer 2

我会采用一种方法将CSS类提供给我的身体。说“myCustomClass”然后..覆盖上面的类，如下所示：

.mycustomclass [class*="span] {
        add properties
 }

示例：http://jsfiddle.net/ankitvijay/n4Enb/

可以使用！important来阻止CSS代码块的运行吗？

2 个答案: