如何在joomla模板中覆盖CSS [英] How to override CSS in joomla template

问题描述

在我的Joomla模板中，我想覆盖一些样式，因此我创建了自己的CSS并添加了样式，还添加了媒体查询. 只有当我使用！important关键字并且某些功能根本无法使用时，大多数功能才有效.例如:

In my Joomla template I would like to override some styles, so I've created my own css and added styles, also media queries. Most of all works only if I use the !important keyword and something does not work at all. For example:

<div id="content_right" class="span3">

在这个div中，我有类和ID.我无法修改该类，因为它会影响模板中的其他div，因此我想通过id添加一些样式.我添加了它，但是它不起作用.我检查了Firebug，并正确加载了CSS.可能是什么问题?

In this div I have class and id. I cannot modify the class, because it affects other divs into the template, so I would like to add some style by id. I've added it but it does not work. I've inspected with Firebug and css is correctly loaded. what could be the problem?

推荐答案

您面临的问题称为 CSS特异性.

是的，!important规则将覆盖所有其他样式，但由于这个原因不应使用.

Yes, the !important rule will override all other styles, but shouldn't be used for this reason.

首先，您需要在Joomla样式表之后 调用样式表.

First, you'll need to call your stylesheet after the Joomla stylesheet.

然后，您需要在样式表中使用与Joomla样式表相同的特异性(或更优).

Then, you'll need to use the same specificity (or better) in your stylesheet, as is used in the Joomla stylesheet.

为澄清起见，请考虑以下示例代码:

To clarify, consider this sample code:

<div id="content">
   <div id="subcontent"> ... </div>
</div>

与此CSS结合:

#content #subcontent {
    background: yellow;
}
#subcontent {
    background: red;
}

#content #subcontent {
  background: yellow;
}
#subcontent {
  background: red;
}

<div id="content">
  <div id="subcontent">...</div>
</div>

第一个选择器显然比第二个选择器更具体.因此，背景将是黄色而不是红色.

The first selector is clearly more specific than the second one. Therefor, will the background be yellow, and not red.

您正面临着同样的问题.第一个选择器是Joomla样式表.因此，您需要指定第二个选择器相同(或更优)以覆盖它:

You are facing the same problem. The first selector is the Joomla stylesheet. So you need to specify the second selector the same (or better) in order to override it:

#content #subcontent {
  background: yellow;
}
#content #subcontent {
  background: red;
}

#content #subcontent {
  background: yellow;
}
#content #subcontent {
  background: red;
}

<div id="content">
  <div id="subcontent">...</div>
</div>

这篇关于如何在joomla模板中覆盖CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！