CSS 클래스에서 ID를 수정 하시겠습니까?

Question

나는 활성 상태의 스타일과 동일한 방식으로 nav <li> 요소의 스타일을 지정하려고합니다. 사용자가 해당 페이지에있을 때 nav 요소는 ID와 함께 .on 클래스를 가져야합니다. 나는 페이지가 협력하지 않기 때문에 어딘가에서 떨어져있다. 참고 이것은 논문을 사용하고 있으므로 각 페이지의 본문에는 이미 .custom 클래스가 있습니다. 감사!

.custom #panel4a.on {/*do some custom active styling*/} 

이 요소를 선택합니다

CSS

/*Navigation*/ 
.custom div#custom_nav ul { 
    list-style-type: none; 
    margin-left: 10px; 
} 

.custom #nav_item { 
    width: 224px; height: 360px; 
    background: url('images/nav_sprite.png'); 
    margin: 10px auto; padding: 0; 
    position: relative;} 

.custom #nav_item li { 
    margin: 0; padding: 0; list-style: none; 
    position: absolute;} 

.custom #nav_item li, #nav_item a { 
    display: block;} 


.custom #panel1 {top: 0px; left: 0px; width: 224px; height: 30px;} 
.custom #panel2 {top: 51px; left: 0px; width: 224px; height: 30px;} 
.custom #panel3 {top: 107px; left: 0px; width: 224px; height: 30px;} 
.custom #panel4 {top: 162px; left: 0px; width: 224px; height: 30px;} 
.custom #panel4a {top: 194px; left: 30px; width: 50px; height: 15px;} 
.custom #panel4b {top: 194px; left: 83px; width: 36px; height: 15px;} 
.custom #panel4c {top: 194px; left: 123px; width: 27px; height: 15px;} 
.custom #panel4d {top: 194px; left: 153px; width: 62px; height: 15px;} 
.custom #panel5 {top: 216px; left: 0px; width: 224px; height: 30px;} 
.custom #panel6 {top: 268px; left: 0px; width: 224px; height: 30px;} 
.custom #panel7 {top: 324px; left: 0px; width: 224px; height: 30px;} 

.custom #panel1 a, #panel2 a, #panel3 a, #panel4 a, #panel5 a, #panel6 a, #panel7 a { 
    height: 30px; 
} 

.custom #panel4a a, #panel4b a, #panel4c a, #panel4d a { 
    height: 15px; 
} 

.custom .on #panel4a { 
    background: transparent url('images/nav_sprite.png') 
    0px -546px no-repeat;}} 

.custom #panel1 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -384px no-repeat;} 
.custom #panel2 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -435px no-repeat;} 
.custom #panel3 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -491px no-repeat;} 
.custom #panel4 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -546px no-repeat;} 
.custom #panel4a a:hover { 
    background: transparent url('images/nav_sprite.png') 
    -30px -578px no-repeat;} 
.custom #panel4b a:hover { 
    background: transparent url('images/nav_sprite.png') 
    -83px -578px no-repeat;} 
.custom #panel4c a:hover { 
    background: transparent url('images/nav_sprite.png') 
    -123px -578px no-repeat;} 
.custom #panel4d a:hover { 
    background: transparent url('images/nav_sprite.png') 
    -153px -578px no-repeat;} 
.custom #panel5 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -600px no-repeat;} 
.custom #panel6 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -652px no-repeat;} 
.custom #panel7 a:hover { 
    background: transparent url('images/nav_sprite.png') 
    0px -708px no-repeat;} 

코드가

function custom_nav() { ?> 
    <ul id="nav_item"> 
     <li id="panel1"><a href="<?php bloginfo(url)?>"></a></li> 
     <li id="panel2"><a href="<?php bloginfo(url)?>/tools"></a></li> 
     <li id="panel3"><a href="<?php bloginfo(url)?>/sales"></a></li> 
     <li id="panel4"><a href="<?php bloginfo(url)?>/portfolio_identity"></a></li> 
     <li id="panel4a" class="<?php if (is_page('portfolio_identity')) {echo 'on';} else {echo 'panel4a';} ?>"><a href="<?php bloginfo(url)?>/portfolio_identity"></a></li> 
     <li id="panel4b"><a href="<?php bloginfo(url)?>/portfolio_print"></a></li> 
     <li id="panel4c"><a href="<?php bloginfo(url)?>/portfolio_web"></a></li> 
     <li id="panel4d"><a href="<?php bloginfo(url)?>/portfolio_packaging"></a></li> 
     <li id="panel5"><a href="<?php bloginfo(url)?>/awards"></a></li> 
     <li id="panel6"><a href="<?php bloginfo(url)?>/contact"></a></li> 
     <li id="panel7"><a href="<?php bloginfo(url)?>/client_login"></a></li> 
    </ul> 
<?php } 
add_action('thesis_hook_before_sidebar_1', 'custom_nav'); 

Answer 1

당신은 올바른 선택하기 위해 사용해야합니다

ul#nav_item #panel4a.on { /** specific styles **/ } 

메모를 이것이다 조잡한 이상 특정; 단지

#panel4a.on으로 충분할 것입니다.

Answer 2

당신은 아마 할 의미 (panel4a 참조) (panel4a 참조) 이드는 모두 panel4a 및 on 클래스입니다.

Answer 3

.on 클래스 #panel4ali 요소 내에없는 ..는 동일한 요소이다 (하나 id`` the other class)

그래서 규칙

.custom #panel4a.on { 
    background: transparent url('images/nav_sprite.png') 0px -546px no-repeat; 
} 

(는 상기 이중 }을 제거해야 끝 부분도 ..)