CSS : 목록에서 글 머리 기호의 색을 변경 하시겠습니까?

Question

목록에서 글 머리 기호의 색을 변경하는 데 문제가 있습니다.

그래서 나는 나의 HTML 파일에 <nav> 태그 내부 목록을 가지고 :

<nav id="top-menu"> 
    <ul> 
     <li> <a href="">Home</a> </li> 
     <li><span> <a href="">Products</a> </span></li> 
     <li> <a href="">Statistics</a> </li> 
     <li> <a href="">Countries</a> </li> 
     <li> <a href="">Settings</a> </li> 
     <li> <a href="">Contacts</a> </li> 
    </ul> 
</nav> 

그래서 당신이 볼 수있는 내 <nav> 태그가 id="top-menu" 있습니다. 그리고 한 가지 더 :

여기

<li><span> <a href="">Products</a> </span></li> 

당신은 내 총알 내부 <span> 태그를 넣을 것을 볼 수 있습니다.

nav#top-menu { 
    width: 100%; 
    height: 33px; 
    background-color: #696969; 
    margin: 0; 
    padding: 0; 
} 

#top-menu ul { 
    display: block; 
    list-style-type: none; 
    width: 600px; 
    margin: 0 auto; 
    padding: 0; 
} 

#top-menu ul li { 
    margin: 0; 
    padding: 0; 
} 

#top-menu ul li a { 
    display: block; 
    float: left; 
    max-height: 25px; 
    width: 100px; 
    margin: 0; 
    padding: 5px 0; 
    font-family: tahoma, sans-serif; 
    font-size: 20px; 
    text-align: center; 
    background-color: #696969; 
    text-decoration: none; 
    color: #FFFFFF; 
    border-bottom: #696969 solid 2px; 
} 


#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; } 

가 그럼이 추가 :

#top-menu ul li span { 
    color: black; 
} 

문제는 아무것도 변경되지 않습니다이다

여기 내 CSS 파일입니다.

다른 말로하면 내 탐색 메뉴의 모든 글 머리 기호는 흰색이지만 '제품'을 검정색으로 만들고 싶습니다.

내가 뭘 잘못하고 있니?

감사합니다.

Answer 1

노력이

http://jsfiddle.net/QZD5d/

CSS를 이런 식으로

#top-menu ul li span a{ 
    color: black; 
} 

Demo

Answer 2

을 시도

nav#top-menu { 
    width: 100%; 
    height: 33px; 
    background-color: #696969; 
    margin: 0; 
    padding: 0; 
} 

#top-menu ul { 
    display: block; 
    list-style-type: none; 
    width: 600px; 
    margin: 0 auto; 
    padding: 0; 
} 

#top-menu ul li { 
    margin: 0; 
    padding: 0; 
} 

#top-menu ul li a { 
    display: block; 
    float: left; 
    max-height: 25px; 
    width: 100px; 
    margin: 0; 
    padding: 5px 0; 
    font-family: tahoma, sans-serif; 
    font-size: 20px; 
    text-align: center; 
    background-color: #696969; 
    text-decoration: none; 
    color: #FFFFFF; 
    border-bottom: #696969 solid 2px; 
} 


#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; } 

#top-menu ul li span a{ 
    color:black 
} 

Answer 3

이 시도 :

#top-menu ul li span a{ 
    color: black !important; 
} 

Answer 4

일반적으로 그러한 수정이 완료됩니다 클래스를 사용하는 대신 HTML 마크 업 구조를 변경.

http://jsfiddle.net/bvedE/1/

HTML 마크 업 :

<nav id="top-menu"> 
    <ul> 
     <li> <a href="">Home</a> </li> 
     <li class="highlight"> <a href="">Products</a> </li> 
     <li> <a href="">Statistics</a> </li> 
     <li> <a href="">Countries</a> </li> 
     <li> <a href="">Settings</a> </li> 
     <li> <a href="">Contacts</a> </li> 
    </ul> 
</nav> 

CSS 코드 : CSS의 하단에 약간의 수정으로

#top-menu ul li.highlight * { 
    color: black; 
} 

나는 항목에 클래스 "하이라이트"를 추가 당신은 당신이 찾고있는 것을 얻습니다.