css - 我不明白为什么我的 CSS 样式会相互干扰？

Question

好吧，我正在尝试设置链接样式，但我的导航也受到影响。

我试图在词法上将它们定位不同，但后面写的 block 似乎有影响。

/*---navbar---*/
  .main-nav li a:link,a:visited{
    padding:8px 0;
    color:white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: transparent;
    transition: border-bottom 0.3s;
 }
.main-nav li a:hover,a:active{
    border-bottom: 2px solid #e58e26;

}

/*---links---*/
a:link,
a:visited {
    color: #e67e22;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #e67e22;

    transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}

Answer 1

这是你的问题:

.main-nav li a:link,a:visited{
   /* style rules */
}
.main-nav li a:hover,a:active{
   /* style rules */
}

每个逗号分隔的选择器都需要写完整:

.main-nav li a:link, .main-nav li a:visited{
   /* style rules */
}
.main-nav li a:hover, .main-nav li a:active{
   /* style rules */
}