什么样的CSS风格去当导航栏的样式

Question

最近我的第一个网站的导航工作时，我一直很困惑哪些样式去哪里，当谈到一个：link和：hover伪类。

这是我一个更好的解释代码：

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    text-decoration: none; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, #header_nav ul li a:visited { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #B40000; 
    background-color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

正如你所看到的，除了一些补充和排除，为的ID的所有3的代码是一样的。这是因为我在试图单独设置样式时看起来有随机结果，所以我发现它更容易复制一切，一遍又一遍，这样就不会丢失任何东西，然而，随着我的StyleSheet扩展，此方法变得越来越混乱与新的页面。

所以我向你们提出的问题是有经验的开发人员：什么样的CSS样式应该去哪里定制链接？

感谢，

将

Answer 1

行为更多的是取决于其它CSS规则，可能适用于您的链接。因此，如果您获得“随机结果”，请在您的网络检查员中查找其他规则，这可能会覆盖您的规则集。

一些提示：

• list-style-type: none;不会使上<a>标签的意义，它仅适用于<ul>或<ol>
• 这可能足以使text-decoration: none;只为<a>标签
• 如果您不想复制所有规则但需要子标签中的规则，则可以使用inherit

如下我会写你的代码（未经测试）：

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, 
#header_nav ul li a:visited { 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    color: #B40000; 
    background-color: #FFF; 
} 

根据您的标记，你可以设置规则像font-family，font-size和color直接为<a>标签，如果没有必要让他们在<li>。