css - HTML5 & CSS：格式化锚点，-宽的

Question

当我将一个<div id="header">块更改为 HTML5 的<header>块时，我遇到了一个特殊的 CSS 格式问题。基本上，我希望<header>块内的链接具有某种颜色并且没有任何装饰。

相关的 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"内容并将 CSS 规则更改为a.hdr有效。改回<div id="header">并且#header a也有效。不过，我不明白为什么只使用<header>和相应的规则会失败，这让我觉得这是“正确”的方法。

对解决方案的初步搜索导致我在其他链接中找到此链接（最初我将<h1>块嵌套在<a>块中），但使用<div>包装器也不起作用。

Answer 1

使用

header h1 a {}

因为您的选择器应该解决您的特异性问题

否则，如果您的样式在被访问后被覆盖（通过 a:visited 选择器），您可以编写一个具有相同特异性的样式，但它会覆盖另一个规则，因为它稍后在级联中

header a:visited {}

让它在样式表的后面出现

顺便说一句，抱歉不得不发布答案，因为我还不能发表评论

Answer 2

尝试更具体。

<header class="main-header">

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

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


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