css - Css 和 html 颜色设置建议

Question

为什么header > section标签采用 CSS 中设置的部分的颜色？

我试图使header > section没有颜色，但由于某种原因，它使用了 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;后者添加一些东西。 这是一个小提琴示例。

Answer 2

这是因为这两个 CSS 规则都适用于该部分。

要使规则仅适用于第二部分，您可以使用.wrapper > section作为选择器。