css - 设置导航栏样式时，哪些 CSS 样式适用于何处

Question

最近在处理我的第一个网站的导航时，我对 a: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;  
}

如您所见，除了一些添加和排除之外，所有 3 个 ID 的代码都是相同的。这是因为在尝试分别设置每个样式时，我得到了看似随机的结果，因此我发现一遍又一遍地复制所有内容更容易，这样就不会遗漏任何内容，但是随着样式表的扩展，这种方法变得越来越困惑新页面。

所以我想问你们这些有经验的开发人员的问题是:自定义链接时应该使用哪些 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> 中.