无法使用多种样式来处理悬停/链接等

时间:2014-07-13 12:29:30

标签: css class

我在尝试对妻子的网站进行一些更改时遇到问题。我已经设置了多个类,用于不同的悬停颜色等。例如。 Lft菜单所有海军文字除了下划线和&浅蓝色,悬停在上面,顶部菜单所有白色文字除了下划线和&浅蓝色,悬停在上面。

我尝试了各种各样的事情,却无法让他们一起工作。一个人继续压倒另一个人。任何帮助都会很棒。

该网站已上线。 www.spunkerella.com

这是样式表的代码。

<style type="text/css" >
<!--
* { padding: ; margin: 0; }

body {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #17215f;
}
#wrapper { 
margin: 30px auto;
 width: 900px;
 background-color:#ffffff;
 border:medium solid #00a9cb;

}
#header {
 width: 900px;
 float: left;
 padding: 0px;
 height:250px;
 margin: 0px 0px 0px 0px;
 background: #ffffff;
}
#leftcolumn { 
 background: #ffffff;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 width: 180px;
 float: left;
}
#rightcolumn { 
 float: right;
 background: #ffffff;
 margin: 0px 0px 0px 0px;
 padding: 5px;
 width: 688px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 background: #ffffff;
 margin: 0px 0px 0px 0px;
 padding: 0px;
}
.style1 {color: #17215f}
.style2 {font-size: xx-small}
a:link {
    color: #453223;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #453223;
}
a:hover {
    text-decoration: underline;
    color: #453223;
}
a:active {
    text-decoration: none;
    color: #453223;
}
.style3 {color: #453223; font-weight: bold; }

.lgfont {color: #453223;}
.style4
a:link {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #ffffff;
}
a:hover {
    text-decoration: underline;
    color: #00a9cb;
}
a:active {
    text-decoration: none;
    color: #ffffff;
}
.style5
a:link {
    color: #17215f;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #17215f;
}
a:hover {
    text-decoration: underline;
    color: #00a9cb;
}
a:active {
    text-decoration: none;
    color: #17215f;
}
-->
</style>

1 个答案:

答案 0 :(得分:0)

当您为CSS中的同一属性指定多个样式时(例如:在悬停时将颜色设置为两个不同的样式),它只能选择其中一个,因此必须覆盖其他样式。这是CSS样式优先级的一个很好的资源:

http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

希望这有帮助!