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

问题描述

在我的 Joomla 模板中，我想覆盖一些样式，因此我创建了自己的 css 并添加了样式，以及媒体查询.最重要的是，只有当我使用 !important 关键字并且某些东西根本不起作用时才有效.例如:

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

解决方案

您面临的问题叫做 CSS 特异性.

是的，!important 规则将覆盖所有其他样式，但不应因此使用.

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

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

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

<div id="子内容">... </div>

结合这个CSS:

#content #subcontent {背景:黄色；}#子内容{背景:红色；}

#content #subcontent {背景:黄色；}#子内容{背景:红色；}

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

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

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

#content #subcontent {背景:黄色；}#content #subcontent {背景:红色；}

#content #subcontent {背景:黄色；}#content #subcontent {背景:红色；}

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

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">

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?

解决方案

The problem you are facing is called CSS specificity.

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

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

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>

Combined with this 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.

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屋！