0

私は自分のサイトでアクティブな状態を持っていますここをクリックして、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;
       }
4

2 に答える 2

2

liとの間のスペースを削除し、後.activeに追加aします。

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

この例では、クラス「アクティブ」を持つリスト要素内のアンカーにスタイルを設定します。

于 2012-12-04T21:54:57.693 に答える
1

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"コンビネータを使用するのではなく、単純な selectors のシーケンスを使用する必要があります。li.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
于 2012-12-04T22:12:51.367 に答える