執行順序

我有一個相當大的頁面，其中包含大量的CSS和HTML。該頁面分爲多個區域。某處設置了每個區域的基本信息（例如文本顏色，鏈接顏色等）。執行順序

這是在CSS文件的開始處完成的。但是，您可以選擇自定義區域內模塊的外觀。所以考慮一下，我在側欄上有一個.right-zone類。我在裏面放了一個導航模塊。一旦我定製了.navigation-module（通過YUI），定製的CSS就會添加到標準的CSS文件中並保存。

我期望CSS從上到下被解釋。

.right-zone a { color: #ff0000; }

是文檔的基礎。因此，定製後，就變成了：

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff; }

所以，想象一下文檔的結構：

[...] 
<div class="right-zone"> 
    <div class="navigation-module"> 
    <a href="http://www.stackoverflow.com/">foobar link</a> 
    </div> 
</div>

我只能假設，最終顏色的鏈接將＃0000FF - 因爲它是在最後聲明CSS文件。出於某種原因，它不會在我的網站上這樣做。

「通用」CSS在第335行定義 - 導航模塊的定義在第409行，但鏈接仍然是紅色而不是藍色。

Firebug將紅色顯示爲最終應用的樣式，並且在藍色的樣式上具有透視效果。任何想法爲什麼發生這種情況？

來源

2010-08-18 Tom

你能提供一個鏈接到網站，這是發生？ – rochal 2010-08-18 14:47:24

你如何嘗試應用.navigation-module a的屬性？ – Sotiris 2010-08-18 14:51:57

您提供的示例不會重現問題，所以它沒有多大用處。 – meagar 2010-08-18 15:04:46

你的例子給我一個藍色的鏈接，因爲它應該。我假設你真正的CSS選擇器更復雜，第一個比第二個更具體。

稍後的規則只會覆蓋較早的規則，如果它具有相同或更大的特異性。例如，.navigation-module a將不會覆蓋較早的#right-zone a或.right-zone div a規則。

來源

2010-08-18 14:49:23 stevemegson

如果提問者不熟悉CSS特異性規則，我建議閱讀Eric Meyer的文章：http：//meyerweb.com/eric/css/link-specificity。html快速總結一下#id> .class || ：psuedo-class || [attribute]>標籤 – RussellUresti 2010-08-18 14:58:18

它是級聯的。所以較低的規則優先。

// this would work as desired... 
.right-zone a { color: #ff0000; } 
.right-zone .navigation-module a { color: #0000ff; }

可選地，您可以使用重要來覆蓋優先順序。

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff !important; }

希望它有幫助！

來源

2010-08-18 14:45:40 Frankie

這也與所謂的CSS特異性有關（就像弗蘭基曾經談到過的那樣）。見CSS-Tricks on Specificity

基本上是：

[any selector] .navigation-module a { color: #0000ff; }

將使其更「具體」，因此覆蓋其他樣式。還要注意的是，具有相同特徵的最後一個定義會勝出。

來源

2010-08-18 14:52:26

回答

相關問題