多類重要的聲明和優先

從理論上說，如果你有這樣的場景：多類重要的聲明和優先

<style type="text/css"> 
    .class1 { 
     color:#F00 !important; 
    } 
    .class2 { 
     color:#00F !important; 
    } 
</style> 

<p class="class2 class1">Test</p>

哪種顏色應該優先考慮？在這種情況下，瀏覽器如何確定優先級？

來源

2011-03-29 Ben Dyer

歡迎來到SO！好的第一個問題。確實，它是'class2'被使用：http://jsfiddle.net/yd6Gy/但是爲什麼？有興趣看看會發生什麼。 – 2011-03-29 14:06:06

這個問題強調了爲什麼我覺得'！important'的標誌設計不好。 – Spudley 2011-03-29 14:09:45

@Spudley你對此絕對正確;不過，據我瞭解這個問題，'重要'在這裏並不重要。同樣的現象會發生，如果你刪除他們兩個 – 2011-03-29 14:11:10

根據這一來源：http://www.boogiejack.com/CSS_4.html

Class2中應覆蓋Class1的造型。

規格的訂單：作爲最後不得已的時候，所有其他衝突分辨率規格不能確定哪一種風格應採取優先，最後的樣式指定將使用的樣式。

來源

2011-03-29 14:05:18

+1這是我期待的深度信息。 [MDC]（http://webcache.googleusercontent.com/search？q = cache：0fgzBZMKlXEJ：https：//developer.mozilla.org/en/Common_CSS_Questions+css+multiple+classes+w3c&cd=6&hl=de&ct=clnk&gl=de&source=www.google.de）更加清楚地表明：'If在兩個規則中聲明瞭相同的屬性，衝突首先通過特定來解決，然後根據CSS聲明的順序解決。類屬性中的類的順序不相關。 ' – 2011-03-29 14:09:57

如果您使用JQuery .addClass方法添加'class2'，似乎不會發生這種情況。 – delphirules 2017-10-16 16:18:58

由於類在添加到元素時都「同等重要」，因此將它們分配給段落的順序無關緊要。

在這種情況下，color在.class1和.class2都聲明爲重要的，但因爲.class2被後.class1瀏覽器會顯示藍色的一段聲明，因爲它會覆蓋從.class1

而且申報的顏色，看看這個：http://jsfiddle.net/3uPXx/1/ 你可以看到它在你的段落中聲明類的順序無關緊要。由於這兩個類定義了相同的屬性（color），它將被覆蓋，並被聲明爲最後一個類。

可以覆蓋這個的唯一的東西是一個inline-style，它很重要，正如你可以在小提琴中看到的那樣。

來源

2011-03-29 14:05:49 Tim

使用兩個權重相同的選擇器，無論您將!important應用於兩者還是將其忽略，行爲都是相同的。

<style type="text/css"> 
    .class1 { 
     color: #F00; /* red */ 
    } 
    .class2 { 
     color: #00F; /* blue */ 
    } 
</style>

html class屬性中類的順序與每個類選擇器的特異性級別無關。

<p class="class2 class1">Test X</p> 
<p class="class1 class2">Test Y</p>

輸出

測試X→藍色
測試Ÿ→藍色

如果你只有一個選擇器類使用!important，那人會優先考慮（因爲它具有更高的特異性水平）。

來源

2013-06-14 05:18:36 smilyface

多類重要的聲明和優先

回答

相關問題