2014-02-28 68 views
2

鑑於以下CSS和HTML,有人可以解釋爲什麼文章標籤中的標題是紅色的,我認爲它應該是藍色的,因爲它們都具有相同的權重,但文章樣式是在h4樣式之後出現的所以應該重寫h4風格。關於CSS特性的困惑

<html> 
<head> 
    <title></title> 

    <style> 
     h4 
     { 
      color:red; 
     } 

     article 
     { 
      color:blue; 
     } 
    </style> 
</head> 
<body> 
    <article> 
     <h4>Latest News</h4> 
    </article> 
</body> 
</html> 

回答

2

的更容易理解的方法:

<h4>更靠近文本比<article>,又都是元素選擇,從而<h4>覆蓋<article>

+1

我認爲這個答案是最好的,非常好/簡單的方法來說。 +1 – Ruddy

0

由於文章的藍色屬性與H4紅色屬性之間存在衝突,Web瀏覽器將始終選擇「最接近」屬性。
因此,在這種情況下,由於文本在H4內部,它具有紅色屬性,它將以紅色顯示文本,但是如果您在H4標籤之外但在文章標籤內部添加了其他文本,則文本將爲藍色。

3

特異性與此無關。在代碼中,h4元素上只有一個規則集color,因此應用該設置。

如果該規則被省略,則h4將從其父項繼承color。但是,對於元素的屬性,當樣式表爲該元素的該屬性設置值時,繼承不會發生。即使在這裏,特異性也不起作用。