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

要覆盖section中设置的CSS属性，您需要在header > section中指定特定属性。您似乎只需要向后者添加color: white;或其他内容。 Here is a Fiddle example.

Answer 2

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

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

Css和html颜色设置建议

2 个答案: