Question

我在我的网站Click Here上有一个活跃的状态，我可以在萤火虫中找到它。我已经为以下标签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;
       }

Answer 1

删除li和.active之间的空格，然后添加a：

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

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

Answer 2

li和.active之间的空格为descendant combinator。所以你的选择器：

.sub-nav-products li .active

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

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

<li>

由于您使用class="active"属性定位li元素，因此您不希望在.active和li之间使用组合子，而是使用{ {3}}：

一系列简单的选择器是一系列简单的选择器，它们没有被组合器分开。

...这意味着您应该删除选择器中.active和.sub-nav-products li.active之间的空格：

<a>

但是等等！还有更多：Web浏览器可能有锚元素<ul class="sub-nav-products"> <li class="active"> <a href="#">Example</a> </li> </ul>的默认规则，并且您尝试在锚元素中设置文本样式：

<a>

您需要直接针对.sub-nav-products li.active a元素编写一个更高sequence of simple selectors的规则，因此最后我们会查看：

{{1}}

麻烦在css中设置活动状态

2 个答案: