CSS/jQueryを使って、ULの最後の李にスタイルを適用する

Question

は、次のHTMLを考えます。最後のdivで、私は下の境界線を配置したいと思います。私はIE7/8をターゲットにしています。私は上の境界がうまく働いている、私は下の境界を得るのを助ける必要があります。

私が試してみた：

ul > li:last-child > div 
    { 
     border-bottom: solid 1px black; 
    } 

私も最後の型-のを使ってみました。あなたはjQueryのルートを行う必要がありますので、私はCSSのソリューションとjQueryのソリューション

Answer 1

は、なぜあなたは<li>内部<div>を持っているのですか？それなしで完全に可能です。

とにかく、これはjQueryを使ってそれを行う方法です：

は、ULに下の枠線を適用します。

$('ul > li:last-child > div').css('border-bottom','1px solid black'); 

Answer 2

:last-childを探しています

は、IE7（IE8のわからない）では動作しません。あなたのCSSラインセレクタはjQueryのに働くだろうまでほとんど同じ方法：

$('ul > li:last > div').addClass('someclass'); 

Answer 3

$("#yourUL li:last div").css({'border-bottom':'solid 1px black'}); 

Answer 4

は、ここでCSSの唯一の解決策です。クロスブラウザーで動作させるには、ulからパディングを削除し、余白を付けてリストをバンプします。

ul.border {border-bottom:1px solid #000;padding:0;margin-left:40px;} 
ul.border li {border-top:1px solid #000;} 

<ul class="border"> 
    <li>Some content</li> 
    <li>some more content</li> 
    <li>final content</li> 
</ul> 

Answer 5

：最後の子は、CSS3であるとは違って：第一子 CSS2で導入され、しばらく何もIEをサポートしていませんでした。私はなぜあなたは「<li>」内の「<div>」が必要かわかりませんが、あなたがそれを必要としない場合は、単に使用することができ、次のjqueryの

$('li').last().addClass('someClass'); 

Answer 6

を使用してそれを実装するための最も安全な方法であると信じて：

ul > li:last-child { 

私はそれをテストし、chrome、ie8、firefox、safariで私のために働いています。