以下css不适用于第二个链接答案

【问题标题】：the following css doesn't work for second link以下css不适用于第二个链接
【发布时间】：2014-10-18 05:29:49
【问题描述】：

 a.nhl:link,a.nhl:visited{font-style:verdana;background: #fff; position: relative;     padding-top:5px; padding-bottom: 5px; color: #666; font-size: 15px; 
font-weight:200; text-transform: uppercase; line-height: 24px;-ms-word-wrap: break-word;  word-wrap: break-word;}
a.nhl:active{color:red;text-decoration:underline;}

a.nhl:hover{color:red;text-decoration:underline;}



a.nhls:link,a.nhls:visited {font-style:verdana;background: #fff; position: relative; padding-top:5px; padding-bottom: 5px; color: #666; font-size: 15px; 

font-weight: 200; text-transform: uppercase; line-height: 24px;-ms-word-wrap: break-word; word-wrap: break-word;}
a.nhls:active{color:red;text-decoration:underline;}
a.nhls:hover{font:bold;color:red;text-decoration:underline;}



     <a class='nhls' href=\"index.php\"  > Home </a >  
    <a class='nhl'  href=\"index.php?title=sample\"> sample </a >

上面的 css 不适用于第二个链接。我无法找出类和链接有什么问题。

谢谢

【问题讨论】：

请让你的代码变得不可读！
您的代码运行良好。 jsfiddle.net/37g8avg7

标签： css class hyperlink

【解决方案1】：

你的css有一些问题：font-style: verdana无效（如果你想指定字体，你需要font-face），font: bold应该是font-weight: bold，可以重写为更清晰，更紧凑。请尝试以下操作：

a.nhl:link,a.nhl:visited,a.nhls:link,a.nhls:visited { 
    font: 200 15px/24px Verdana;
    background: #fff;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #666;
    text-transform: uppercase;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
a.nhl:active, a.nhl:hover,a.nhls:active,a.nhls:hover {
    color:red;
    text-decoration:underline;
}
a.nhls:hover{
    font-weight:bold;
}

根据您发布的代码，两个链接在悬停和活动状态下都将带有下划线和红色，而第一个链接在悬停状态下将加粗。如果你想让text-decoration: underline 指令生效，你需要确保你之前在链接上设置了text-decoration: none，因为默认情况下浏览器经常给链接加下划线。

我做了什么：

将 a.nhl:link,a.nhl:visited 和 a.nhls:link,a.nhls:visited 合并到一个声明中，因为它们是相同的；
将所有类与color: red 和text-decoration: underline 组合在一个声明中；
使用font 简写设置字体粗细、大小、行高和字体；
整理了格式。

如果你的 css 有问题，我建议你使用CSS Lint 来检查代码中的错误。

【讨论】：