7

次のネストされたリストに似た構造のページ メニューが生成されます。

<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>
        Page 3
        <ul>
            <li>Subpage 1</li>
            <li>Subpage 2</li> <!-- Can I target ONLY this element? -->
        </ul>
    </li>
</ul>

このリストは動的であることに注意してください。項目数とレベル数は予測できません。したがって、次のようなものは十分に柔軟ではありません。

/* I know this does not have great browser support - just an example */
ul > li > ul > li:last-child {
    /* CSS here */
}

サーバーコードを変更して最後の項目にクラスを追加できることはわかっていますが、CSS でこれが可能かどうかをまず知りたいと思います。

さらに複雑なことに、すべての主要なブラウザーと IE 7+ をターゲットにしたいと考えています。

CSS を使用して最後のリスト項目をターゲットにすることは可能ですか?

基本的に、このFiddleを解決する必要があります (@Pumbaa80 経由)。

4

5 に答える 5

6

CSS3 方式 (IE9+)

最後のアイテムの深さが正確にわかっている場合は、次の呼び出しを繰り返すことができます:last-child。

li:last-child li:last-child {
    color: red;
}

http://caniuse.com/#search=last-childによると、この疑似クラス セレクターはバージョン 9 より前の IE ではサポートされていません。もちろん、このリスト アイテムの深さがわからなければ、この方法はあまり役に立ちません。

JavaScript のやり方

JavaScript を介して最後のリスト項目をターゲットにすることもできます。

var items = document.getElementById("mylist").getElementsByTagName("li"),
    _item = items[ items.length - 1 ];

_item.className == "" 
  ? _item.className = "last" 
  : _item.className += " last" ;

これは生の JavaScript であり、追加のフレームワークやライブラリは必要ありません。jQuery のような一般的なフレームワークを使用している場合、これはさらに簡単になる可能性があります。

$("#mylist li:last").addClass("last");

このような目的のためだけにjQuery を使用することはお勧めしません。生の JavaScript ははるかに高速で、肥大化もはるかに少なくなります。

プリプロセッサの方法

ナビゲーション メニューの構成方法によっては、サーバー側の言語を使用して最後のリスト項目を識別し、そのようにマークできる場合があります。たとえば、DOMDocumentPHP のクラスを使用して次のことを実行できます。

$d = new DOMDocument();
$d->loadHTML( $html );
    
$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c ) 
  ? $l->setAttribute("class", "last") 
  : $l->setAttribute("class", "last $c");

echo $d->saveHTML( $l );

これにより、HTML 内の最後のリスト項目が検出され、それに「last」の新しいクラスが追加されます。これの利点は、複雑で、多くの場合サポートが不十分な CSS3 セレクターを必要としないことです。さらに、簡単なことを行うために大規模な JavaScript ライブラリを追加する必要はありません。

于 2012-05-02T13:46:04.123 に答える
5

あなたは正しい方法で投稿しました：

li:last-child

確認する必要がある場合は、javascript / jQuery を使用して実行できます。しかし、「js が無効になっている場合は?」という問題が発生する可能性があります。

を使用しli:last-childます。

編集：

に少なくともクラスを追加できれば、UL簡単になります。それ以外の場合は、リストが 2 つしかないことが確実な場合:

ul ul li:last-child { /* code */ }

別の編集：

http://jsfiddle.net/toroncino/4NXg2/

ダブルソリューション、js と css。

もう一度編集します。

あなたのフィドル: http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');​
于 2012-05-02T13:45:20.037 に答える
1

それは不可能。あなたの制約

アイテムの数とレベルの数は予測できません。

つまり、CSS2 セレクター、さらには CSS3 セレクターでも十分ではありません。

リストの深さ 2 で機能するセレクターがあるとします。その項目に 3 番目のリスト レベルを追加すると、そのセレクターが無効になります。つまり、セレクターは要素の子要素に依存する必要があります。そのようなセレクターはまだ存在せず、 CSS4で導入される予定です。これが問題の解決策になります。

/* CSS4 */
li:last-child:not($li li) {
    /**/
}

セレクターは、「何らかの子孫を持つもの$li li」を意味します。lili

于 2012-05-02T14:09:02.123 に答える
1

要するに：いいえ。あなたが与えている制約は、IE7 での「高度な css」のサポートが (非常に) 貧弱であるため、CSS ソリューションを実用的ではありません。

あなたの場合、javascriptの使用はオプションですか？jquery では、次のことが頭に浮かびます。

$('ul li').last().css('color', 'red');

編集:これは、最後のliの子ノードが一致するアイテムのリストのさらに下に自動的にあるため、「不明なツリーの深さ」の問題も回避しますが、以前のliアイテムの子ノードはそうではありません:

  • 第 1 要素
  • 2番目の要素
  • 3番目の要素
    • 4番目の要素
  • 5番目の要素

編集:ここでフィドルを更新しましたhttp://jsfiddle.net/NaJas/4/

于 2012-05-02T13:54:46.020 に答える
0

CSS で li:last-child を使用できます

于 2012-05-02T13:46:43.357 に答える