衝突屬性之間的優先順序

當直接或通過css指定衝突屬性時，如何確定優先級？衝突屬性之間的優先順序

在這個例子中，通過CSS指定的display : none似乎重寫被直接用於id=1指定的display : inline-block，使得元件變得可見。

<style> 
.invisible{ 
    display : none 
} 
</style> 
<div id=1 class="invisible" style="display:inline-block">Hello World</div>

在下面的例子中，在那裏我有兩個相互矛盾的類規範，

<style> 
.invisible{ 
    display : none 
} 
.visible{ 
    display : inline-block 
} 
</style> 
<div id=1 class="visible invisible">Hello World</div>

通過.visible類指定的display : inline-block似乎是壓倒一切通過.invisible類指定display : none。

在這些情況下決定優先級的規則是什麼？

來源

2012-02-26 sawa

'visible'和'invisible'都指定'display：none'。猜猜這應該是固定的，以反映實際的規則內容，然後再繼續。 – 2012-02-26 22:39:33

要回答你的問題，例如，一個在你的代碼是錯誤的...它不顯示=「inline-block的」 ..它

<div id=1 class="invisible" style="display: inline-block;">Hello World</div>

內嵌樣式總是優先於樣式表。但由於它寫錯了，樣式表接管了。

在示例二中，顯示塊因顯示後聲明而失敗：none。瀏覽器從上到下閱讀代碼，因此您爲屬性聲明的最後一個值會獲勝（除非您使用！important標籤）。再次，內聯樣式總是贏。有更多的優先規則，但這就是你需要的例子。

來源

2012-02-26 22:48:44 kdub

我剛剛意識到這一點。謝謝。我修好了它。你的回答正是我想要的。 – sawa 2012-02-26 22:52:14

OK，對CSS規則，specificity概念確定哪些規則（S）優先考慮（這是因爲當他們指定的同名屬性。情況很重要）。如果規則指定相同的CSS屬性具有相同特定性，樣式表中指定的最新規則將屬性值貢獻給計算的樣式。

來源

2012-02-26 22:42:52

也謝謝。我讀了你的鏈接，結論似乎是kdub寫的。 – sawa 2012-02-26 22:55:05

衝突屬性之間的優先順序

回答

相關問題