階層式排序與明確性

衝突的規則在階層式樣式表中很常見,可允許將來自多個樣式表來源的樣式套用至 HTML 文件中的元素。

將兩個以上的宣告套用至相同的元素時,這些宣告之間可能會發生衝突。瞭解階層式樣式表如何套用至元素可協助您疑難排解格式設定錯誤。

繼承

HTML 網頁中的每個元素都存在於文件物件模組 (DOM) 樹狀目錄中的某處,該樹狀目錄的根是 HTML 元素。可套用階層式樣式表規則的元素幾乎一律屬於 BODY 元素。任何以 BODY 元素開頭的元素都可套用樣式。在大部分的情況下,元素會繼承 DOM 中其父元素的樣式。

未格式化的 P 元素會繼承任何為其父元素 (BODY 元素) 所設定的樣式。<p class="style1"> 所定義的元素會繼承其父元素的樣式,以及樣式表的規則 p.style1 中為其類別定義的樣式。如果父元素的樣式與樣式表中的樣式規則發生衝突,則以樣式表規則 p.style1 優先。

例如,若樣式表包含會將色彩設為紅色的 p 規則 (p { color: #F00; }),也包含會將色彩設為藍色的 p.style1 規則 (p.style1 { color: #00F; }),則元素 <p class="style1"> 中的文字會顯示為藍色。

優先順序

樣式規則會按照其顯示順序來套用。例如,若 HTML 網頁同時包含外部樣式表的連結,以及頁首中發生衝突的樣式定義,則會先套用樣式表規則,然後套用頁首中所定義的樣式規則,並覆寫外部樣式表中所定義的任何規則。

如果網頁包含兩個外部樣式表的連結,則所列的第二個樣式表中的規則優先於第一個樣式表中的規則。

樣式規則是依照下列順序來套用:

  1. 外部樣式表參照。

    如果外部樣式表中有衝突的規則,將優先使用最後一個例項。

    如果有多個外部樣式表,將會依照樣式表的列出順序來套用規則。例如,若網頁包含三個樣式表連結,則第二個樣式表中的規則優先於第一個樣式表中衝突的規則,且第三個樣式表中衝突的規則優先於第一個和第二個樣式表。

  2. HTML 頁首樣式宣告。

    如果頁首樣式規則中有任何衝突,將優先使用最後一個例項。

  3. HTML 網頁內嵌樣式宣告。

    如果 HTML 標籤包含明確樣式規則,例如 <p style=color:#0F0;">,則標籤中定義的規則優先於 HTML 頁首規則及外部樣式表規則。

連結虛擬類別選取器

由於優先順序的緣故,:link 虛擬類別選取器必須依照下列順序來宣告,才能正確運作:

a:link {}
a:visited {}
a:hover {}
a:active {}