Question

我正在尝试使用与调整其活动状态相同的方式设置导航<li>元素的样式。当用户在相关页面上时，除了ID之外，nav元素还应具有类.on。因为页面没有合作，我离开了某个地方。仅供参考，这是使用论文，因此每个页面的正文已经有.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;}

代码（见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');

Answer 1

你可能打算这样做：

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

这将选择ID为panel4a和on类的元素。

Answer 2

您需要使用正确的选择器顺序：

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

请注意，这非常过于具体;只是

#panel4a.on就足够了。

Answer 3

.on类不在#panel4a li元素内..它位于同一元素上（一个id`` the other class）

所以规则应该是

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

（在结尾删除了双} .. ）

CSS类修改id？

3 个答案: