li"活跃"类不能通过CSS定位

Question

我已经完成了1000次,这可能是因为我感到沮丧,我无法弄明白,但我在基于活动页面更改我的唠叨栏链接的外观时遇到了很多麻烦.

我正在使用Codeigniter,所以这是我的导航条代码:

<div id="wrapper">
        <div class="nav">
            <ul>
                <?php if ($this->uri->segment(1) === FALSE) { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/">home</a></li>
                <?php if ($this->uri->segment(1) == 'about') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/about">about</a></li>
                <?php if ($this->uri->segment(1) == 'music') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/music">music</a></li>
                <?php if ($this->uri->segment(1) == 'contact') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/contact">contact</a></li>
            </ul>
        </div>
</div>

其次,这里是那是CSS 应该改变链接的外观:

#wrapper .nav ul li .active a {
    color: grey;
    cursor: default;
}

我完全失去了为什么这不起作用.如果有人会那么善良,可以让我站起来,并提醒我为什么我会成为一个很棒的白痴.

谢谢.

Answer 1

像这样删除了li之前.active:

#wrapper .nav ul .active a {
    color: grey;
    cursor: default;
}

jsFiddle在这里

你试图给li这个班的孩子打造一个风格.active

或者,您也可以使用:

#wrapper .nav ul li.active a {
    color: grey;
    cursor: default;
}

jsFiddle在这里

......要么工作要么