直到现在我使用 <div> s 用于页眉和页脚，但随着我转向 HTML5，我想用 <header> 替换它们和 <footer>标签。旧版本有样式定义
#footer a {
text-decoration: none;
}
删除链接的下划线。这按预期工作。但是改成<footer>之后标签:
footer a {
text-decoration: none;
}
样式被忽略。我究竟做错了什么？
(完整的代码，包括样式，可以在 here 中找到)
最佳答案
特异性。
#footer a 是一个 ID (#footer) 和一个元素 (a)。
ID 比类更具体，类比元素更具体。
footer a 不起作用，因为它是两个元素，这是非常低的特异性，它被 a:link 覆盖，从技术上讲，它是一个元素和一个 ( psuedo)class，意味着它比两个元素具有更高的特异性。
您需要做的就是增加 footer a 声明的特异性 - 给页脚一个类或一个 ID，或者做 footer a:link, footer a:visited.
基本上它归结为 ID 总是覆盖类总是覆盖元素。我相信它是 255 个元素 = 1 个类和 255 个类 = 1 个 ID(但您永远不需要那么具体)。内联样式和 !important 样式比任何东西都更具体，包括 ID。计算特异性的基本方法是计算 0,0,0 表示法(IDs 、类、元素)。
#footer a 是 1,0,1。
a:link 是 0,1,1。
页脚 a 为 0,0,2。
那些是从最高到最低的特异性组织的。要使 footer a 比 a:link 更具体，您需要在声明中至少添加 1 个类或 1 个 ID，例如像 footer#footer a, footer.bottom a, footer a:link, footer a:visited 等等(类或相应地添加到 HTML 标记中的 ID)。最后一个选项不需要更改任何 HTML 标记，因为您只是覆盖了 :link 和 :visited 伪类(就特异性计算而言，它们被视为真实类，就像像 :before 和 :after 这样的伪元素算作元素。
所有解决方案中最简单的是将 a:link, a:visited 样式声明更改为简单的 a，这意味着该声明将不如页脚中的一个，您无需更改任何其他内容即可开始工作。
特异性可以说是您在 CSS 中需要掌握的最重要的概念。这里有一些很好的资源来了解更多信息:
关于html - <footer> 忽略的 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19819811/