CSS类修改id？

Question

我正在尝试设置导航样式 <li>元素的样式与我为其事件状态设置样式的方式相同。当用户在有问题的页面上时，导航元素应该有类 .on除了它的ID。我离开了某个地方，因为该页面不合作。仅供引用，这是使用 Thesis，所以每个页面的正文都已经有 .custom 类。谢谢!

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

代码(参见面板 4a)

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 不过应该足够了。