0

私はそのようなメニューを持っています：

<ul class="ipro_menu">

    <li><a href="/">Home</a></li>
    <li class="active-parent"><a href="/menu-item-1/">Menu Item 1</a> 

        <ul class="sub-menu">
            <li><a href="/subitem-1/">Subitem 1</a></li>
            <li class="active"><a href="/subitem-2/">Subitem 2</a></li>
        </ul>

    </li>
    <li><a href="/menu-item-2/">Menu Item 2</a></li>

</ul>

現在のページは自動的にクラスactiveを取得し、メインul（サブメニュー）の下のulにある場合は、メインul要素がクラスを取得しactive-parentます。

したがって、上記の例では、「サブアイテム2」ページを表示しているので、「メニューアイテム1」にはクラスが与えられactive-parentます。

active-parentすべてのサブメニュー要素ではなく、ONLYのフォントの色を変更しようとしています。これが私が持っているものです：

ul.ipro_menu li.active-parent a {
color: #FF0000;
}

問題は、これがactive-parent要素だけでなく、サブメニューのすべてのliも変更していることです。

マークされた特定の要素のフォントの色のみを変更するようにこれを変更するにはどうすればよいactive-parentですか？

4

3 に答える 3

4

その動作はCSSで期待されています。子供のためにそのスタイルをオーバーライドする唯一の方法は、それらの要素に別の（そしてより具体的な）スタイルを使用することです：

ul.ipro_menu li.active-parent ul.sub-menu li a {
    color:#000;
}
于 2012-07-09T14:18:40.473 に答える
1

HREFにアクティブな親クラスを配置してみてください。

http://jsfiddle.net/RAkuc/

<ul class="ipro_menu">

<li><a href="/">Home</a></li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a> 

<ul class="sub-menu">
<li><a href="/subitem-1/">Subitem 1</a></li>
<li class="active"><a href="/subitem-2/">Subitem 2</a></li>
</ul>

</li>
<li><a href="/menu-item-2/">Menu Item 2</a></li>

</ul> ​

ul.ipro_menu a.active-parent  {
color: #FF0000;
}​
于 2012-07-09T14:19:22.800 に答える
1

直接子セレクターを使用します。

ul.ipro_menu li.active-parent > a {
  color: #FF0000;
}

これは、li要素の直接の子孫にのみ影響します。

于 2012-07-09T14:25:53.020 に答える