如何在joomla模板中覆盖CSS

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

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