css異なるリンクスタイル

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; 
} 

を持っている。しかし、これは（リンクはunstylized表示されます）動作していません。どうすればこの問題を解決できますか？

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); 
} 

これを試してみてください。..