修改過的h1字體大小

Question

我很困惑，爲什麼這兩個h1標籤有不同的字體大小，顯然它們包含相同的屬性/聲明。對於我所擁有的小知識，我覺得它與繼承有關;看到一個h1標籤是如何嵌套的而另一個不是。
HTML：

<div id="site-offline-container"> 
     <div id="site-offline-heading"> 
      <h1>Hello World</h1> 
     </div> 
    </div> 

    <h1 class="hello">Hello World</h1> 

CSS：

body { 
    background:#fff; 
    font-family:Trebuchet MS, Arial, Tahoma, sans-serif; 
    font-size:14px; letter-spacing:1px; color:#000; 
} 
#site-offline-heading { 
    font-size: 40px; 
    letter-spacing:-5px; 
    color:#000; 
    text-shadow: rgba(255,255,255,0.2) 1px 1px; 
} 
#site-offline-heading h1 { 
    margin-bottom:10px; 
} 
.hello { 
    font-size: 40px; 
    letter-spacing:-5px; 
    color:#000; 
    text-shadow: rgba(255,255,255,0.2) 1px 1px; 
} 

Answer 1

#site-offline-heading h1告訴的CSS樣式裏面的元素全部H1標題與ID站點離線標題

你的其他H1是外此元素因此使用h1的默認樣式，如果要將相同樣式應用於所有h1標籤，請使用：h1{/*styling*/}

Answer 2

您正在第一種情況下在包含h1的元素上設置字體大小，直接在第二種情況下的h1元素上設置字體大小。這是有區別的，因爲在第一種情況下，h1採用其默認字體大小200％，即其容器（父）的字體大小的兩倍。