CSS優先級規則

我的理解是，有3種樣式表：CSS優先級規則

網頁作者定義
由用戶定義（即由用戶定義並安裝到一組的默認樣式的瀏覽器）瀏覽器

根據this book如果元件被由選擇在任何這些樣式表不匹配時，纔將所述p定義

默認的樣式表roperty值將從父元素繼承。然而，本書還說瀏覽器的默認樣式表應該爲所有類型的元素定義一個樣式。

如果瀏覽器的樣式表確實爲所有類型的元素定義了樣式，並且此樣式比繼承具有更高的優先級，則永遠不應該遵守繼承的屬性值。顯然情況並非如此，那麼在瀏覽器的默認樣式表中定義的屬性以及爲父元素定義的屬性的正確優先規則究竟是什麼？（我知道，不是所有的CSS屬性繼承，但對於本次討論的緣故承擔，我指的是一個屬性，如color）

由於提前，唐

來源

2009-01-31 Dónal

瀏覽器沒有定義所有元素的樣式，只是某些樣式。簡化內部瀏覽器的樣式表可能是這樣的：

a { color: blue; border-bottom: 1px solid blue } 
p { margin-bottom: 1em; } 
blockquote { margin: 0 5em 1em 5em; }

採取以下列出的HTML片段爲例：

<ul> 
    <li> 
    <span>Blah blah blah.</span> 
    </li> 
    <li> 
    <a href="about:">Foo</a> 
    </li> 
</ul>

當瀏覽器去渲染<span>元素，它看起來會仔細檢查所有的樣式表（瀏覽器，作者和用戶）匹配的規則和figures out which one is the most important。在這個例子中，筆者樣式表包含一個規則：

ul { color: Green; }

您的瀏覽器的內部樣式不適合span指定color值，所以它走了文檔樹，直到找到的東西，確實有color規則定義，在這種情況下爲ul。另一方面，當瀏覽器呈現<a>元素時，它在用戶或作者樣式表中找不到指定color的任何內容，因此它使用瀏覽器樣式表中的規則。

最終結果：綠色文本，藍色鏈接。

獎勵信息：如果您使用的是Firefox，您可以通過在地址欄中粘貼resource://gre/res/html.css來查看（其中一個）其內部css文件。（這似乎是一個直接的超鏈接混淆SO的降價引擎）

來源

2009-01-31 03:40:10

你對。有三種樣式表來源。首先是瀏覽器樣式，然後是用戶（閱讀器）樣式，最後是作者樣式;作者風格通常勝過用戶風格。如果在層疊式（在用戶或作者樣式表中）稍後定義風格，則在瀏覽器的默認樣式表中定義的任何內容都將被覆蓋。如果由於作者編寫的樣式而有某些東西需要繼承，那麼它會覆蓋默認樣式，因爲它在後面的級聯中定義。

轉到here更多關於級聯。

來源

2009-01-31 03:03:44 geowa4

忽略所有內容的內聯樣式，如果多個類/選擇器適用於頁面元素，最後一個定義的最後一個勝出（因爲瀏覽器樣式首先被定義，它們通常被覆蓋）。當有一個類/選擇器在所有級別的層次結構中鑽取時，就會發出警告。

下面是一個例子表：

<style type="text/css"> 
     #content 
     { 
      width: auto; 
     } 

     #content DIV.special 
     { 
      width: 200px; 
      background: #999999; 
      border: 2px dotted #000000; 
     } 

     #content DIV 
     { 
      width: 300px; 
      border: 1px solid #CCCCCC; 
     } 



    </style>

給出下面的HTML：

 <div id="content"> 
      <div class="special"> 
       should render 200px wide with a gray background and a dotted border 
      </div> 
      <div> 
       should render 300px wide with a 1pt border 
      </div> 
     </div>

然後，如果你這種風格添加到圖紙的底部：

DIV 
    { 
     background: #CC9999; 
    }

你會把所有的東西變成淺紫色（因爲它是帶顏色值的最後一個DIV），除了帶有.special的div類（因爲它更具體）。

希望有所幫助。

來源

2009-01-31 03:06:15

但是＃內容DIV比DIV – 2009-01-31 04:22:31

從他們的父母繼承元素的風格可以有兩種方式。首先，雖然瀏覽器可以爲每個元素定義樣式屬性，但他們通常不會做到這一點。因此，例如，「p」元素通常具有默認頂邊距（等等），但沒有定義字體樣式，以便在缺少作者或用戶規則的情況下將從其父項繼承。其次，CSS中的某些地方可以使用顯式值「inherit」來指示渲染器從其父項採用該樣式屬性。這在IE（我認爲是表格單元格）的地方曾經是必要的，並且在覆蓋級聯中的早期規則時仍然如此。

來源

2009-01-31 03:42:43 Alohci