修改id的CSS類？

我正在嘗試使用與我設置其活動狀態相同的方式創建導航<li>元素。當用戶在相關頁面上時，導航元素除了ID以外還應該具有.on類別。由於頁面不合作，我離開了某個地方。僅供參考，這是使用論文，所以每個頁面的主體已經有.custom類。謝謝！修改id的CSS類？

CSS（見panel4a）

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

碼（見panel4a）

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

來源

2011-10-31 chris_mac

您需要使用正確的選擇順序：

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

注意這是嚴重過度專用;而只是

#panel4a.on應該足夠。

來源

2011-10-31 13:24:03 Ross

就是這樣，謝謝！ –

你大概的意思做：

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

這將選擇元素與兩個ID爲panel4a和on類。

來源

2011-10-31 13:22:26 PeeHaa

的.on類不是#panel4ali元件內部..它是在相同的元素（一個id`` the other class）

所以規則應當是

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

（在除去雙}結束以及..）

來源

2011-10-31 13:24:12

修改id的CSS類？

回答

相關問題