如何在joomla模板

Question

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

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

在这个div我有课和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;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

你面临着同样的问题。第一个选择器是Joomla样式表。所以你需要指定第二个选择器相同（或更好）以覆盖它：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;