선택한 가로 메뉴를 표시하는 방법

Question

각 항목에는 네비게이션 아이콘 (css 스프라이트 사용)과 항목 이름이 표시되는 4 개의 항목 메뉴가 있습니다. 여기 내 마크 업/CSS입니다 : 모두가 잘 작동

ul { list-style:none outside none; } 
ul li { 
    background-color:#000; 
    float:left; 
    height:100px; 
} 
ul li a { 
    background-image:url('sprite.png'); 
    color:#FFF; 
    display:block; 
    height:10px; 
    padding-top:20px; 
    text-align:center; 
    width:50px; 
} 

ul li.a a { background-position:0px 0px; } 
ul li.b a { background-position:-50px 0px } 
ul li.c a { background-position:-100px 0px } 
ul li.d a { background-position:-150px 0px }  
----------------------------------------------------------------- 
<ul> 
    <li class="a"><a href="a">A</a></li> 
    <li class="b"><a href="b">B</a></li> 
    <li class="c"><a href="c">C</a></li> 
    <li class="d"><a href="d">D</a></li> 
</ul> 

이,하지만 난 현재 선택된 항목에 다른 효과를 보여주고 싶은 말은. 특히 다른 배경색, 다른 아이콘 및 다른 색 텍스트를 갖고 싶습니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 내가 생각할 수있는 유일한 방법은 <li>에 'selected'클래스를 추가하는 것입니다.이 클래스는 다른 배경색을 지정하고 'selected'클래스를 <a>에 추가하여 다른 배경 이미지와 텍스트의 다른 색상을 지정합니다. . 같은
뭔가 :

ul li.selected { background-color:#FFF; } 
ul li a { color:#000; } 
ul li.a a.selected { background-position:-250px 0px; } 
ul li.b a.selected { background-position:-300px 0px; } 
ul li.c a.selected { background-position:-350px 0px; } 
ul li.d a.selected { background-position:-400px 0px; } 
-------------------------------------------------------------------------- 
<ul> 
    <li class="a selected"><a class="selected" href="a">A</a></li> 
    <li class="b"><a href="b">B</a></li> 
    <li class="c"><a href="c">C</a></li> 
    <li class="d"><a href="d">D</a></li> 
</ul> 

오해하지 않는 나는 이런 식으로 할 수 있지만 완료해야하는데 방법이 아니다처럼 그냥 생각합니다.

Answer 1

CSS에서 캐스케이드를 사용하면 약간의 코드로 원하는 효과를 얻을 수 있습니다.

.selected을 li에 적용한 다음 이중 등급으로 이동하십시오.

ul li.selected { background-color:#FFF; } 
ul li.a.selected a { background-position:-250px 0px; } 
ul li.b.selected a { background-position:-300px 0px; } 
ul li.c.selected a { background-position:-350px 0px; } 
ul li.d.selected a { background-position:-400px 0px; } 

기본적으로, 당신은 체인 클래스입니다.

이렇게하면 li과 a에 모두 selected 클래스를 추가 할 필요가 없습니다.

http://www.w3.org/TR/CSS2/selector.html#class-html