<footer>忽略的CSS样式

Question

到目前为止，我使用<div>s作为页眉和页脚，但是当我移动到HTML5时，我想用<header>和<footer>标记替换它们。旧版本有风格定义。

#footer a {
  text-decoration: none;
}

若要从链接中删除下划线，请执行以下操作。这如预期的那样起作用。但是，在切换到<footer>标记之后：

footer a {
  text-decoration: none;
}

这种风格被忽略了。我做错了什么？

(完整的代码，包括样式，可以找到http://ryonen.net/index000.php)

Answer 1

特异性。

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

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

footer a不能工作，因为它是两个元素，它的特异性很低，而且它被a:link覆盖，从技术上讲，它是一个元素和一个(Psuedo)类，这意味着它比两个元素具有更高的特异性。

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

基本上，它归结为ID，总是覆盖类，总是覆盖元素。我相信它是255个元素=1个类和255个类=1个ID (但您不需要那么具体)。内联样式和!important样式比任何东西都更具体，包括ID。计算特异性的基本方法是在0,0,0符号( in、类、元素)中计算in、类和元素的数量(假设您不必担心内联样式或!important)。

#footer a为1，0-1。

a:link为0,1,1。

footer a为0,0,2。

这些组织从最高到最低的特异性。要使footer a比a:link更具体，需要向声明中添加至少一个类或一个ID，例如footer#footer a、footer.bottom a、footer a:link, footer a:visited等(相应地将类或ID添加到HTML中)。最后一个选项不需要更改任何HTML，因为您只是在重写:link和:visited psuedoclasses (它们在专用性计算方面算作真实类，就像psuedo-- :before和:after计数这样的元素)。

所有解决方案中最简单的是将a:link, a:visited样式的声明更改为简单的a，这意味着声明将不像页脚中的声明那么具体，而且您不需要修改任何其他东西就可以开始工作。

在CSS中，特性可以说是您需要掌握的最重要的概念。以下是一些学习更多信息的好资源：

• CSS特异性的细节(CSS技巧)
• CSS特异性(粉碎Mag)
• CSS特异性(MDN)
• 了解CSS的特殊性(Nettuts)

Answer 2

具体的问题是..。

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

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