4

到目前为止，我使用<div>s 作为页眉和页脚，但是当我转向 HTML5 时，我想用<header>和<footer>标签替换它们。旧版本有样式定义 

#footer a {
  text-decoration: none;
}

从链接中删除下划线。这按预期工作。但是改成<footer>标签后：

footer a {
  text-decoration: none;
}

样式被忽略。我究竟做错了什么？

（完整的代码，包括样式，可以在这里找到）

4

2 回答 2

4

特异性。

#footer a是一个 ID ( #footer) 和一个元素 ( a)。

ID 比类更具体，类比元素更具体。

footer a不起作用，因为它是两个元素，特异性非常低，并且它被覆盖，a:link从技术上讲，它是一个元素和一个（伪）类，这意味着它具有比两个元素更高的特异性。

您需要做的就是增加footer a声明的特异性——或者给页脚一个类或一个 ID，或者做footer a:link, footer a:visited.

基本上它归结为ID总是覆盖类总是覆盖元素。我相信它是 255 个元素 = 1 个类和 255 个类 = 1 个 ID（但你永远不需要那么具体）。内联样式和!important样式比任何东西都更具体，包括 ID。计算特异性的基本方法是用 0,0,0 表示法（IDs,classes,elements）计算 ID、类和元素的数量（假设您不必担心内联样式或!important）。

#footer a是 1,0,1。

a:link是 0,1,1。

footer 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样式声明更改为 simple a，这意味着该声明将不如页脚中的声明那么具体，您无需更改任何其他内容即可开始工作。

特异性可以说是你在 CSS 中需要掌握的最重要的一个概念。这里有一些很好的资源来了解更多信息：

于 2013-11-06T18:34:19.180 回答
3

特异性是那里的问题......

a:link, a:visited覆盖footer a所以让它

footer a:link, 
footer a:visited {
   text-decoration: none;
}
于 2013-11-06T18:27:40.417 回答