Question

我试图让不同的东西看起来不同，具体取决于上下文。例如，在我的HTML中我有

<li><a href= "#" class= "navlink"> Home </a></li>
<li><a href= "#" class= "navlink"> Types of Insurance </a></li>
<li><a href= "#" class= "navlink"> Insurance Basics </a></li>
<li><a href= "#" class= "navlink"> Customer Center </a></li>
<li><a href= "#" class= "navlink"> About </a></li>

在我的CSS中我有

.navlink : link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

.navlink : hover 
{
background-color:#ADD8E6;
}
.navlink : visited 
{
background-color:#ADD8E6;
}

但这不起作用（链接看起来没有固定）。我该如何解决这个问题？

Answer 1

:之前或之后必须没有空格。

Answer 2

你需要摆脱冒号（:）之前和之后的空格。

您还可以通过以下方式最小化代码：

.navlink {
    // styling for unclicked link
}

.navlink:hover, .navlink:visited {
    // styling for hover/visited state
}

我正在组合hover和visited，因为您所做的唯一更改是颜色，两者都是相同的。

Demo

Answer 3

#nav{
    float: left;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/  
    font-family: 'Georgia', serif;
}

#nav>li{
    display: block;
    float: left;
    line-height: 36px;
    padding-right: 10px;
    margin-left: 3px;
    margin-right: 3px;
    background:  url(../img/nav-bullet.png) no-repeat center right;
}

#nav li>a:first-letter { 
    font-family: 'YataghanRegular', 'Georgia', serif;   
    font-size: 20px;
}

#nav li>a{ /* Parent Menu without hover*/
    text-decoration: none;
    color: #000000;
    /*color: #CC3700; 606060*/
    padding: 0px 10px 0px 10px;
    display: block; 

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#nav li:last-child{
    background: none;
}

#nav>li:hover>a,
#nav>li.current-menu-item>a{/* Parent menu color with hover */
    /*color: #eee;
    background: #363636;*/
    color:#000000; 
    background: #cce4ff ;
    /*font-size: 12px;*/

    /*background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535)); 
    background: -moz-linear-gradient(top,  #000000,  #353535);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0);*/

    /*text-shadow: 0 -1px rgba(0, 0, 0, 0.7);*/

    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
    box-shadow: 0px 1px 2px rgba(0,0,0,.5); 
}

试试这个..

css不同的链接样式

3 个答案: