如何在joomla模板中覆盖CSS

Question

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

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

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