Css和html顏色設置建議

Question

爲什麼header > section標記會採用CSS中已設置的部分的顏色？

我試圖讓header > section沒有顏色，但由於某種原因它使用的是段標記中設置的顏色。

HTML

<div id ="wrapper"> 
    <header> 
     <section> 
     <h1>This is Staffordshire</h1> 
     </section> 
     <nav> 
     <ul> 
      <li><a href="">◊ Home</a></li> 
      <li><a href="">◊ News Round</a></li> 
      <li><a href="">◊ Contact Us </a></li> 
      <li><a href="">◊ About The Town</a></li> 
     </ul> 
     </nav> 
    </header> 
    <section> 
     <article> 
     </article> 
    </section> 
    <footer> 
    </footer> 
</div> 

CSS

header { 
    margin-top: 50px; 
    position: absolute; 
    top: 0; 
    display: block; 
    width: 960px; 
    height: 150px; 
} 

section { 
    display: block; 
    background-color: #0FF; 
    width: 960x; 
    height: 600px; 
} 

header > section { 
    border: thick groove #ff0000; 
    display: block; 
    width: 300px; 
    height: 150px; 
    float: left; 
} 

Answer 1

爲了覆蓋CSS屬性中設置section，你需要在header > section指定特定的屬性。看起來你只需要添加color: white;或其他東西。 Here is a Fiddle example.

Answer 2

這是因爲兩個CSS規則都適用於該部分。

要使規則僅適用於第二部分，您可以使用.wrapper > section作爲選擇器。