Question

我正在使用joomla模板，我在模块内部创建了一个自定义按钮，但按钮css被模块css覆盖。我怎样才能解决这个问题。帮助将不胜感激。

这是我想要的按钮：

.button-middle {
    background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    float: left;
    height: 27px;
    line-height: 27px;
}

以下代码具有覆盖按钮背景：（

div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
    background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
    padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
    background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
    padding: 0;
}

Answer 1

在后台末尾添加!important：

  background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;

Answer 2

自定义CSS文件的<link>声明（如果您使用的话）是否在Joomla包含的<head>部分中的CSS文件之后？如果您没有使用自定义CSS文件，请考虑它 - 这意味着您可以通过让您自己的选择器“胜过”Joomla来完全摆脱类似的问题，只需将CSS加载最后（从而获得更高的优先级）。 / p>

<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />

（从HTML 5的右括号中省略/。）

如果你曾经遇到过这个问题，请相信我你会再次拥有它。（再次......）

Answer 3

如果您可以控制标记，则可以添加id属性，然后制作背景选择器#someid。据我所知，只有类和元素选择器，单个id选择器可能胜过它们。

免责声明：我在火车上，我现在无法测试。这可能是完全错误的。我也没有CSS特异性规范来检查。

编辑：

考虑以下标记：

<div id="info" class="module">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div class="test">
                                data
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后是以下css：

.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */

“数据”一词的背景颜色为绿色。

即使您无法轻易更改标记以添加ID，也可以尝试在父母链中的任何位置找到ID，或者将您的选择器编写为div.module .button-middle { ... }，它仍然归类为0,2 1。只要你的风格比你想要覆盖的风格更具体，它就会胜过。

fiddle here

关于特异性的几个链接：here和here。

让CSS背景不被其他人覆盖？

3 个答案: