CSS樣式化活動狀態的問題

Question

我的網站上有一個活躍狀態，請單擊此處 ，我可以在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;
       }

Answer 1

刪除li和.active之間的空間，並添加a after：

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

本示例將樣式設置為錨定在具有“活動”類的列表元素內。

Answer 2

li和.active之間的空間是后代組合器 。 因此，您的選擇器：

.sub-nav-products li .active

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

使用該規則，您的HTML必須看起來像這樣：

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

由於您要使用class="active"屬性作為<li>元素的目標，因此您不想在li和.active之間使用組合.active ，而是使用一系列簡單的選擇器 ：

簡單選擇器序列是不由組合器分隔的一系列簡單選擇器。

...這意味着您應該在選擇器中刪除li和.active之間的空格：

.sub-nav-products li.active

可是等等！ 還有更多：Web瀏覽器可能對錨元素<a>具有默認規則，並且您正在嘗試在錨元素中設置文本樣式：

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

您需要直接針對<a>元素編寫具有更高特異性的規則，因此最終我們要研究：

.sub-nav-products li.active a