如何在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>