爲什麼我的CSS類被覆蓋/忽略？

我知道id優先於class;不幸的是我的html是由Drupal生成的，我無法爲需要樣式的特定div添加一個id。爲什麼我的CSS類被覆蓋/忽略？

下面是基本的精簡的HTML（爲簡潔起見刪除了內容）。

<div id="home-blocks-area" class="clearfix"> 
    <div align="center" id="homepage_speakers"> 
     <div class="region region-home-speakers"> 
      <div id="block-speaker-carousel-speaker-carousel" class="block block-speaker-carousel "> 
       <div class="content"> 
       <!-- actual content --> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我需要能夠定位到該<div class="content"> DIV用樣式表。問題是，根據Firebug，我的樣式代碼正在被#home-blocks-aread .block .content的樣式所取代，這與我需要的這個樣式不一樣。 enter image description here

我需要使用哪些CSS來獲得特定的div，請記住，正如我所說的，我無法將ID添加到它。

來源

2012-07-11 EmmyS

難道你不能只是增加'＃home-blocks-area'到你的第二個選擇器來平衡它，因爲你知道ID比類更具體（你只是用這些知識來回答你的標題）？ – BoltClock 2012-07-11 16:45:49

你可以添加重視它，像這樣：

.region-home-speakers div.content { background: none !important; }

然而，這是不是一個偉大的實踐中做這樣的。我肯定會改變像BoltClock這樣的CSS說：

#home-blocks-area .region-home-speakers div.content { background: none; }

來源

2012-07-11 16:45:53 Drew

有幾個選項。最簡單的方法是把你的線路移到＃home-block-area ...部分之後。從上到下讀取CSS，向下的元素覆蓋上面的元素。

來源

2012-07-11 16:46:24 user1337

CSS Specificity是答案（至於爲什麼你的風格被覆蓋）。選擇器中的ID會比兩級樣式添加更高的特性。

您需要對樣式更加具體（可能會添加更多類或添加更多根元素以增加其值），或者（如您所述）創建一個標識，以衡量當前的樣式表。

您也可以使用!important，但許多人會認爲，考慮到它的主要意圖是客戶端自定義（用於可訪問性），因此hack-ish。

來源

2012-07-11 16:47:17

我剛纔提到的是我不能添加一個id，因爲HTML是由Drupal動態生成的。 – EmmyS 2012-07-11 16:52:18

@EmmyS：我知道你不能爲_that_元素添加一個元素，但是你可以使用在父列表中找到的預先存在的ID來增加該元素的特異性。 – 2012-07-11 16:58:44

啊，對不起 - 我誤解了。 – EmmyS 2012-07-11 17:01:24

它，你被迫解決在哈克的方式問題的一個恥辱...

#home-blocks-aread .block div.content { background: none; }

會做這項工作。

來源

2012-07-11 16:47:28 Hbcdev

頂部風格的得分爲{0, 1, 2, 0}，第二種風格的得分爲{0, 0, 2, 1}，您需要爲第二種風格添加一個ID（#homepage_speakers也許？）以提高預測的準確性。當兩個樣式具有相同的分數時，CSS發生的順序就很重要。

要麼是這樣，要麼只是將!important添加到第二種風格，但我不喜歡這樣做，因爲我喜歡有適當的CSS層次結構。

CSS選擇器得分由{Is Important 1/0, number of IDs, number of Classes, number of Elements}計算得出。更高的訂單號碼通常具有更高的置信度，例如，具有1個ID的規則高於具有5個類別且沒有ID的規則。

來源

2012-07-11 16:50:06 Matthew

謝謝;這是很好的知道。 – EmmyS 2012-07-11 16:56:55

爲什麼我的CSS類被覆蓋/忽略？

回答

相關問題