如何在 joomla 模板中覆盖 CSS

Question

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

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

在这个 div 中我有 class 和 id。我无法修改 class，因为它会影响到模板中的其他 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>