javascript - 在 CSS 中设置活动状态时遇到问题

Question

我在我的网站Click Here上有一个活动状态，我可以在 firebug 中获取它。我已经为以下选项卡创建了一个活动状态Relax and unwind，我按照以下方式编写了脚本

<li {if segment_3 == "relax"} class="active"{/if}><a href="{path='shop/view/relax'}">relax &amp; unwind</a></li>

我试图在 css 中设置此选项卡的样式，但它似乎不起作用。

.sub-nav-products li .active{
    color: #fff;
       }

score 2 · Accepted Answer

删除 and 之间的空格li并在之后.active添加a：

.sub-nav-products li.active a {
    color: #fff;
}

此示例将样式设置为锚点在具有“活动”类的列表元素内。

score 1 · Accepted Answer

li和之间的空间.active是后代组合符。所以你的选择器：

.sub-nav-products li .active

...表示一个class="active"元素是一个元素的后代，而该<li>元素又是一个class="sub-nav-products"元素的后代。

使用该规则，您的 HTML 必须如下所示：

<ul class="sub-nav-products">
    <li>
        <span class="active"></span>
    </li>
</ul>

由于您的目标是<li>具有该属性的元素，因此class="active"您不想在 and 之间使用组合li器.active，而是使用一系列简单的选择器：

简单选择器序列是不被组合器分隔的简单选择器链。

...这意味着您应该删除选择器之间的li空格.active：

.sub-nav-products li.active

可是等等！还有更多：网络浏览器可能有一个锚元素的默认规则<a>，并且您正在尝试在锚元素中设置文本样式：

<ul class="sub-nav-products">
    <li class="active">
        <a href="#">Example</a>
    </li>
</ul>

您需要直接针对该元素编写具有更高特异性<a>的规则，所以最后我们正在研究：

.sub-nav-products li.active a

2 回答 2