0

サイトのメインメニューのスタイル設定に取り組んでおり、順序付けされていないリストの最初と最後のLI要素にクラスを追加したいのですが、トップレベルの最初と最後のアイテム のみです。

<div id="primary-menu-container" class="menu">
    <div id="menu-icon">Menu</div>
    <ul id="primary-menu" class="hover sf-menu">
        <li><a href="#">Fabrics</a></li>
        <li><a href="#">Contemporary</a></li>
        <li><a href="#>Vinyl</a></li>
        <li><a href="#">Gold</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Test Tag</a>
            <ul class="sub-menu">
                <li><a href="#">Testing</a></li>
                <li><a href="#">news</a></li>
            </ul>
        </li>
    </ul>
</div>​

最初のliは常に最上位のリスト要素であるため、最初のliは非常に簡単です。最後のトップレベルのリスト要素にサブメニューがある可能性があるため、最後の1つをターゲットにすることについて混乱しています。

選択された解決策はありませんでしたが、次の回答のいくつかごとに：最初のレベルの最後のliにクラスを追加する方法

私は次のことを試しました。これは最初の項目で機能しますが、「最後の」クラスを「テストタグ」とそのすべての子に追加しますが、このクラスは「テストタグ」liにのみ追加します。 

$​("#primary-menu > li:first").addClass("first");
$("#primary-menu > li:last").addClass("last");

これが私のフィドルです。</ p>

http://jsfiddle.net/tdcf7/1/

4

2 に答える 2

1

修正済み：http：//jsfiddle.net/tdcf7/3/

.last > a{ color: red }

すべての子孫にクラスを追加するわけではありません。CSSセレクター（.last a）は、クラスを持つ単一アイテムのすべての子孫を選択するだけでした。

子孫の代わりに子セレクターを使用することにより、上記の修正では、そのクラス<a>の子の直接の子のみが選択されます。<li>

または、必要なコンテンツだけを正確に選択するのが難しい場合は、いつでもすべての子孫にスタイルを適用して、間違った子孫にオーバーライドすることができます。

li           { color:green } /* default style            */
li.last *    { color:red   } /* hit 'em all!             */
li.last ul * { color:green } /* ooh...but not these ones */
于 2012-04-11T19:16:15.090 に答える
0

JavaScriptは問題ありません。サブリストを赤くしているのは、CSSです。

.last > a{ color: red;}

直接の>子孫にのみ影響します

于 2012-04-11T19:19:28.500 に答える