php - li 类 'active' 不可由 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

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

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

jsFiddle here

您正尝试使用 .active 类为 li 的子级设置样式

或者，您也可以使用:

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

jsFiddle here

...要么工作。