當DOM元素有多個類時css的特殊性

我不得不爲具有float：float/left的規則解析html文檔集的css。當DOM元素有多個類時css的特殊性

我已經想出了當一組嵌套的DOM元素中的每一個最多隻有一個類時，所有東西都是如何工作的。規則的特殊性基於計算出的選擇器號碼，先是id，然後是class，然後是標籤elem。如果有關係，請選擇最後的規則。

所以特異性的思想是，至多有一個規則是基於匹配DOM標籤元素的選擇器的特殊性來選擇的。

如果有多個班級，不僅在最深的DOM孩子，而且在父母級別，我該怎麼辦。簡單形式的多個類選擇並應用多個規則。但我無法弄清楚確定特異性如何與此相互作用的完整指導原則。例如。通常特異性選擇一個規則，最高特異性。但在終端DOM元素中有多個類，在互聯網上演示的簡單情況下，由多個類選擇的多個規則具有相同的特徵。但是我可以看到更復雜的情景，不知道如何選擇規則。

這裏有一個案例：

p.cls1 { 
} 
div#id1 p.cls2 { 
} 
.cls3 { 
}

HTML：

<div id="id1"><p class="cls1 cls2 cls3">...

所有3類報復選定儘管所有3具有不同的特異性號。但是，我可以通過給外層div賦予多個類來使問題變得更糟。儘管有特殊性，但在css 2.1規範中找不到任何信息，說明應該發生什麼，以及多個類如何選擇多個規則。

Andy

來源

2011-04-13 Andy Nuss

你忘了'！important'，它增加了一個全新的規則級別。 – Khez 2011-04-13 21:00:37

在下面添加更新。我希望這有幫助。 – 2011-04-14 14:45:48

確定您實際要求的內容有點困難。一個具體的例子會有幫助。

但在一般樣式優先級從最高到最低的順序是：

內聯樣式
包括樣式（同一文件）
外部引用的樣式

內的所有那些，上市last的風格具有更高的優先級，假設特異性是相同的。但是，優先級較高的樣式（例如內聯樣式）總是會覆蓋其他類型，而不考慮其特性。因此，元素上的內聯樣式將始終覆蓋所包含樣式表中的樣式。

這裏的更多信息，你可能已經知道的特異性... http://www.htmldog.com/guides/cssadvanced/specificity/

一組嵌套選擇器的實際特殊性需要一些計算。基本上，你給每個 ID選擇器（「＃無論」）的值爲 100，每個類選擇器（「.whatever」）的值爲10和每個 HTML選擇器（「無論」）的值爲 1。然後你把它們全部加起來，然後嘿，你具有的特異性值。

這一切都已經表示，!important地方添加規則同樣適用其他層，只是!important給予優先於所有非!important風格。

更新：你的例子有點好奇，我認爲你誤解了特異性。特定性而不是表示適用於與另一個類相同的元素的類完全覆蓋它。這意味着「如果有風格屬性是相同的，那麼具有更高特異性的風格將覆蓋其他風格屬性。」

在您的示例中，cls2上與任何其他類樣式匹配的屬性都將覆蓋它們。但是，如果沒有風格衝突，那就沒有問題了！它只會採取所有的風格。

也許它會幫助把它想像爲分配任何舊對象的變量。有多種方法可以引用變量，但是您的特性定義了您的執行順序。最後設置變量的分配是對象實際呈現時的情況。

來源

2011-04-13 21:01:24

你說的很好，我已經實施的規則。但是，當涉及到具有多個類的標籤時，我迷失了方向。在這種情況下，不知何故，多個規則被選中，並且不知何故不清楚。 I.E.我已經看到了多個具有不同特性的規則。 – 2011-04-13 23:40:43

你能更新你的帖子來提供一個具體的例子嗎？ – 2011-04-14 01:23:37

謝謝，我更新了 – 2011-04-14 04:17:55

每個選擇器的所有規則都適用，除非有衝突。所以，如果你有這些樣式：

p.cls1 { 
    margin: 10px; 
    padding: 3px 
} 

div#id1 p.cls2 { 
    margin :5px; 
    background:green; 
} 

.cls3 { 
    margin :20px; 
    position:relative 
}

那麼你的DOM元素最終會了結：

{ margin:5px; padding:3px; background:green; position:relative; }

保證金：5px的勝出是因爲特殊性，其他款式都適用，因爲沒有衝突。

來源

2011-04-14 04:40:44 Faust

當DOM元素有多個類時css的特殊性

回答

相關問題