多個CSS類：屬性基於定義的順序進行重疊

當在一個元素上定義了多個類時，CSS中是否有規則確定級聯順序？（class="one two" vs class="two one"）多個CSS類：屬性基於定義的順序進行重疊

現在，似乎沒有這種效果。

例子：兩個div的是橙色的Firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
    <style> 
     .one { border: 6px dashed green } 
     .two { border: 6px dashed orange } 
    </style> 
    </head> 

    <body> 

    <div class="one two"> 
    hello world 
    </div> 

    <div class="two one"> 
    hello world 
    </div>

來源

2010-06-17 太極者無極而生

請參見[此處類似的問題]（http://stackoverflow.com/q/13849655/287948），其中焦點是指定如何解釋多個名稱的W3C標準。 – 2012-12-12 23:31:02

如果你有一個類應用於特定元素，一般類不會覆蓋它，也就是說，如果你的樣式看起來像div.one .two，那麼它們不會覆蓋div.one。（在Safari中測試） – paulrehkugler 2013-03-11 20:45:07

它取決於哪一個在樣式表中聲明爲最後一個。例如，

.one { border: 6px dashed green } 
.two { border: 6px dashed orange }

.two { border: 6px dashed green } 
.one { border: 6px dashed orange }

來源

2010-06-17 23:40:48 edl

**注意頭元素中的樣式錶鏈接序列對於定義哪個將首先聲明爲**也很重要。我只是意識到這一點，把jQuery UI的CSS鏈接到頭前關閉標記，以避免我的CSS覆蓋jquery UI CSS時，類具有相同的權重/特異性（0,1,0,0），我們仍然可以覆蓋然後通過使用更具體的使用選擇器，如使用ID或選擇多個類，如'.parent .one'。 – CallMeLaNN 2011-11-09 02:11:40

在CSS在這些情況下什麼定義勝最後類。元素上的順序無關緊要，這在我知道的所有瀏覽器中都是一致的，我會嘗試並指定相關的規範位。

的整個類不贏，屬性單獨獲勝，如果.one有一個屬性，.two沒有你當然會看到這兩個<div>元素的該屬性。

來源

2010-06-17 23:40:20

只是注意到：在IE6中使用多類規則實際上存在差異（讀取：錯誤）。不過，在這個簡單的例子中並不適用。 :) – deceze 2010-06-17 23:45:57

@deceze - 只有在IE6中，我傾向於忽視這一點......但是，只適用於*規則*，而不是*使用*，例如'.two.one' vs''one.two'在CSS中。 – 2010-06-17 23:48:00

因此，當使用已經制作好的樣式表（比如引導程序）時，這會變得非常不錯... – My1 2015-11-11 13:13:45

倍率將在其中的類聲明的順序發生。所以總是贏得勝利

來源

2010-06-17 23:40:59

class屬性的順序並不重要。這取決於幾件事情，在你的情況下，這是你的CSS寫入的順序。

兩種樣式都具有相同的特徵，所以.two樣式會覆蓋.one樣式，因爲它在樣式標籤中較低。

來源

2010-06-17 23:41:03

我認爲很明顯，沒有這樣的規則適用。規則.one與規則.two具有相同的特性，因此根據CSS標準，.two塊中的屬性會覆蓋.one中的屬性，因爲.two塊稍後出現。在class屬性中沒有任何地方可以參考單詞的順序。

來源

2010-06-17 23:44:41 hobbs

當使用多個類來定義元素樣式表時，您可以使用!important來覆蓋樣式表的「cascating」。

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

它會讓你的div綠色。

來源

2010-06-17 23:55:28

如有疑問，請在FireBug中查看頁面。它將刪除被覆蓋的類並顯示它們在頁面中應用的順序。

另請注意，內聯樣式將覆蓋在外部樣式表中聲明的樣式。如果你想打破級聯鏈AF適用性，可以使用！重要聲明中

p {margin: 10px 5px 0 10px !important}

這將導致！重要 declration覆蓋其他與位置無關。有些人認爲這是不好的做法，但如果明智地使用它可以派上用場。

來源

2010-06-18 00:31:37 Laramie

正如其他答案所指出的那樣，在class屬性中聲明的順序沒有影響 - 優先級來自CSS文件中聲明的順序。

但是，如果你真的想嘲笑起來的東西，允許類屬性您爲「假」的優先級，你可以嘗試：

.one-first { border: 6px dashed green } 
     .two-first { border: 6px dashed orange } 

    .one { border: 6px dashed green } 
     .two { border: 6px dashed orange }

然後

<div class="one-first two"/>

和

<div class="two-first one"/>

將排序優先與最後一個獲勝（類似於靜態CSS屬性最後優先考慮。）

來源

2010-06-18 00:33:30 mdma

多個CSS類：屬性基於定義的順序進行重疊

回答

相關問題