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 here

您尝试使用班级li

为.active的孩子设置样式

或者，您也可以使用：

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

jsFiddle here

......要么工作。

li“活跃”类不能通过CSS定位

1 个答案: