如何在 joomla 模板中覆盖 CSS

Question

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

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

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

Answer 1

您面临的问题称为CSS specificity。

是的，!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>