爲什麼<header>標籤的繼承與ID爲「header」的div不同？

我有一個HTML頁面，其中鏈接被指定爲大部分正文的默認藍色。我speficy像這樣（用SASS）：爲什麼<header>標籤的繼承與ID爲「header」的div不同？

a:link { 
    color: $link_new; // This is a blue colour 
}

我有了一個藍色背景的導航菜單，所以只在標題，我想改變的鏈接，白色。直到最近，我的頭被包含在具有ID「頭」的DIV標籤中。我的代碼是這樣的：

#header a:link { 
     color: #ffffff; 
     text-decoration: none; 
    }

最近，我想我會改變div是一個<header> tag。只需將<div id="header"></div>更改爲<header></header>即可。所以，在我的CSS中，我有：

header a:link { 
     color: #ffffff; 
     text-decoration: none; 
    }

但是，當我這樣做時，鏈接文本停止變白！我沒有改變任何東西，所以我不明白這是怎麼回事。我將<header>恢復爲<div id="header">，我的鏈接恢復爲白色，因爲它們應該是。

我不明白。 <header>標籤是否繼承不同或其他？爲什麼標題標籤會從a:link聲明中提取顏色，而不是聲明的本地header a:link？

這裏是鏈接元素是什麼樣子下`使用Firefox開發人員檢查時：

header id

，這裏是什麼樣子了<header>元素：

header element

2014-07-15 Questioner

這是否幫助？ http://css-tricks.com/specifics-on-css-specificity/ – rvighne

[This jsFiddle]（http：// jsfiddle。net/k8e4M /）顯示'div＃header'和'header'都無法更改鏈接顏色。你能否與我們分享一個簡化的測試案例來展示你的問題？ – rvighne

@rvighne，我在複製測試用例時遇到了麻煩，但我在我的問題中添加了一些檢查器輸出，希望能夠解決一些問題。我認爲這個問題與你提供的那個鏈接中描述的內容有關 - 我沒有意識到ID比組件擁有更高的權威 - 但是我仍然很難將它包圍。 – Questioner

您需要在a之後加:link

像這樣

header a:link { 
    color: #fff 
}

2014-07-15 03:23:42 Tushar

謝謝你的迴應。不幸的是，這並沒有改變任何東西。 – Questioner

但''a''後面有*'：link' ...檢查OP。 – rvighne

選中[this]（http://codepen.io/anon/pen/krdfx）。在這裏，如果您評論「header a：link」的代碼，則會應用「a：link」的顏色（yello）。 – Tushar

您需要更改：鏈接到。

header a { 
    color: #ffffff; 
    text-decoration: none; 
}

當你不使用HTML5（通過看你的文檔類型）請檢查Jsfiddle demo

2014-07-15 03:33:26 Husen

謝謝你的迴應。不幸的是，我試過這個，它沒有改變任何東西。 – Questioner

，所以你不能直接使用header元素。按照HTML5規範header被視爲HTML元素。因此，只需更改您的Doctype並使用此<!DOCTYPE html>即可使用<header>元素。在這種情況下

在第一代碼

2014-07-15 04:22:28

我不明白爲什麼這是downvoted。這是正確的答案。元素標題在XHTML 1.0中不存在 –

哦有人投下了這個答案。真奇怪 –

您通過選擇「的#header a」和後您使用<header>標籤比你通過給予風格編寫的代碼「頭一個」 ID的優先級高於類或元素選擇高

2014-07-15 11:12:10

回答