css - HTML5 & CSS : Formatting anchors, <header>-宽

Question

我在更改 <div id="header"> 时遇到了一个特殊的 CSS 格式问题阻止 HTML5 的 <header>堵塞。基本上，我想要 <header> 中的链接 block 具有特定颜色并且没有任何装饰。

相关的 HTML 和 CSS 代码如下:

<!-- HTML5 code -->
<header>
    <h1>
        <a href="#">Link text</a>
    </h1>
</header>

/* CSS code */
header a {
    color: black;
    text-decoration: none;
}

我看到的输出(使用 Firefox 20.0 和 Ubuntu 12.04)就好像上面的 CSS 代码片段不存在一样。

添加类似 class="hdr" 的内容到 anchor block 并将 CSS 规则更改为 a.hdr作品。变回 <div id="header">和 #header a也有效。不过，我不明白为什么只使用 <header>相应的规则失败了，我认为这是“正确”的方法。

最初对解决方案的搜索使我在其他链接中找到了这个 link (我将 <h1> block 嵌套在 <a> block 中，最初)，但使用 <div>包装器也不起作用。

Answer 1

尝试更具体。

<header class="main-header">

    <a href="#"><h1>Link Text</h1></a>

</header> <!-- .main-header -->


.main-header a {
    color: green;
    text-decoration: none;
}