基於樣式表中訂單的CSS特性/優先級？

我簡要介紹了CSS3 Selectors spec，但是找不到如何解決這個問題。另外，當你移動CSS聲明時，我並不期望這個結果發生變化，但它確實如此。任何幫助都會很棒。基於樣式表中訂單的CSS特性/優先級？

div.green_colour div.has_colour{ 
 
    background-color: green; 
 
} 
 
div.red_colour div.has_colour{ 
 
    background-color: red; 
 
}

<div class="red_colour"> 
 
    <div class="green_colour"> 
 
    <div class="has_colour"> 
 
     I would like this to be green 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="green_colour"> 
 
    <div class="red_colour"> 
 
    <div class="has_colour"> 
 
     I would like this to be red 
 
    </div> 
 
    </div> 
 
</div>

來源

2011-09-12 AJP

僅供參考，這是CSS3選擇器規範。 CSS3是模塊化的，所以有51個規格 - 見http://www.w3.org/Style/CSS/current-work。像HTML5一樣，這不是一件大事。 –

我認爲[CSS CSS Cascading and Inheritance]規範]（http://www.w3.org/TR/css3-cascade/）中介紹了與移動時具有不同效果的樣式有關的問題。 –

輝煌。非常感謝Paul的鏈接。 – AJP

可以使用E > F子選擇器作爲解決你的問題，因爲這樣的：

div.green_colour > div.has_colour{ 
    background-color: green; 
} 
div.red_colour > div.has_colour{ 
    background-color: red; 
}

根據這個圖表http://www.quirksmode.org/css/contents.html它與所有主要的瀏覽器和IE兼容7+

還有其他方法可以實現上述解決方案（例如通過javascript）如果你感興趣。

- 編輯：

我不是100％肯定，如果您的解決方案不工作的原因是由於一個事實，即瀏覽器解析從右到左，而不是從左到右CSS，但我相信它與它有關。有人請糾正我，如果我錯了。

來源

2011-09-12 01:58:39 Bassem

'Link-'非常棒。非常感謝。實際上我並沒有試圖避免使用JavaScript，現在可以更多地剔除整個負載。非常感謝。還要感謝QuirksMode鏈接。這裏是關於兒童組合器的[w3規範]（http://www.w3.org/TR/css3-selectors/#child-combinators），雖然它並沒有談論強制執行優先級。 – AJP

它與綠色規則後宣佈的紅色規則有關。 'has_colour'元素都符合這個規則，但是由於紅色元素是最後一個元素，所以這個元素被應用。這也是爲什麼你首先導入一個'reset.css'文件而不是最後導入HTML頭部的原因。 –

@Benjamin同意，但has_colour'聲明與祖先'div.green_colour'作爲後代組合關係不應該瀏覽器檢查整個規則，而不僅僅是它的一部分？因此，我的左右解析理論。 – Bassem

基於樣式表中訂單的CSS特性/優先級？

回答

相關問題