Question

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

#footer a {
  text-decoration: none;
}

从链接中删除下划线。这按预期工作。但在更改为<footer>标记后：

footer a {
  text-decoration: none;
}

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

（完整代码，包括样式，可以找到here）

Answer 1

特异性。

#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表示法（ID，类，元素）中计算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等等（相应地将类或ID添加到HTML标记中）。最后一个选项不需要更改任何HTML标记，因为您只是覆盖:link和:visited伪类（在特异性计算方面计算为真实类，就像{{1}这样的伪元素一样}和:before计为元素。）

所有解决方案中最简单的方法是将:after样式声明更改为简单a:link, a:visited，这意味着声明将不如页脚中的声明更具体，您无需更改其他任何东西都可以开始工作。

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

Answer 2

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

a:link, a:visited会覆盖footer a，因此请将其设为

footer a:link, 
footer a:visited {
   text-decoration: none;
}

<footer> </footer>忽略CSS样式

2 个答案: