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

如果您想在不使用重要标记的情况下更正此问题，请修改＆＃39;导航＆＃39;以下内容：

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

以下是更新小提琴的链接： http://jsfiddle.net/8MwX7/2/

Answer 2

使用!important标记菜单的样式，以防止它被覆盖。

nav a {
 /*other css rules*/
 color: rgba(255,255,255,1) !important ; 
}

Updated Fiddle

页面链接样式搞乱导航菜单链接样式。可以使用不同的链接样式？

2 个答案: