我注意到与我的常规页面链接相关的 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;
}
最佳答案
我想补充一点,在 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/
关于html - 页面链接样式与导航菜单链接样式混淆。可以使用不同的链接样式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24474821/