Question

 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不适用于第二个链接。我无法找出课程和链接有什么问题。

由于

Answer 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：访问了一个单独的声明，因为它们是相同的;
将所有类与color: red和text-decoration: underline合并为一个声明;
使用font简写来设置字体粗细，大小，行高和字体;
整理格式。

如果您的css出现问题，我建议您使用CSS Lint检查代码中的错误。

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

1 个答案: