html - 页面链接样式与导航菜单链接样式混淆。可以使用不同的链接样式吗？

Question

我注意到与我的常规页面链接相关的 CSS 代码对我的网页导航菜单的导航项有影响。我怎样才能避免这种情况并使导航菜单链接保持最初的样式？参见 http://jsfiddle.net/8MwX7/

非常感谢

页面链接:

a:link {
    border-bottom: none;
    color: #2d7ddf;
    text-decoration: none;
}
a:hover {
    border-bottom: 1px dotted #2d7ddf;
    background: none;
}
a:visited {
    background: none;
}
a:active {
    background: none;
}

导航菜单:

nav {
    float: right;
    margin: 20px auto;
    width: 100%;
}
nav ul {
    margin-right: -4px;
    margin-left: 5px;
    text-align: right;
    }
nav ul li {
    display: inline-block;
    margin-right: -4px;
    margin-left: 5px;
    vertical-align: top;
}
nav a {
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.25);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;

}
nav a:hover {
    background: rgba(0,0,0,0.35)
}
.activeNav {
    background: rgba(0,0,0,0.35)
}
nav ul li ul {
    position: absolute;
    display: block;
    margin-top: 5px;

    background: none;
    padding-top: 5px
}
nav ul li ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0
}
nav ul li ul li a {
    display: block;
    text-align: left;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px rgba(0,0,0,0.33);
    padding: 10px
}
nav ul li ul li a:hover {
    background: rgba(20,150,220,0.5);
    color: white;
    text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
    display: block;
}
.hover span {
    color: rgba(255,255,255,0.9);
    background: rgba(20,150,220,0.5);
    border-radius: 5px;
    position: absolute;
    display: block;
    margin: 5px 0 0 -57px;
    padding: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
}

Answer 1

我想补充一点，在 CSS 中使用 !important 关键字通常被认为是不好的做法。

What are the implications of using "!important" in CSS?

http://james.padolsey.com/usability/dont-use-important/

您的样式无法正常工作的原因是

    a:link, a:hover, a:active, a:visited

被认为比

更具体

nav a

如果您想在不使用 important 标签的情况下更正此问题，请将“nav a”修改为以下内容:

nav a:link, nav a:hover, nav a:active, nav a:visited {
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.25);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;
}

上面的代码生成了以下 css:

nav a:link, nav a:hover, nav a:active, nav a:visited

比

更具体

a:link, a:hover, a:active, a:visited

这是更新后的 fiddle 的链接: http://jsfiddle.net/8MwX7/2/