Применение стиля к последнему литий в ул с CSS/Jquery

Question

Учитывая следующий HTML:

<ul> 
    <li><div>Some content</div></li> 
    <li><div>some more content</div></li> 
    <li><div>final content</div></li> 
</ul> 

Я хотел бы применить верхнюю границу вокруг каждого дел. На последнем div я хотел бы поставить нижнюю границу. Я нацелен на IE7/8. У меня верхняя граница работает отлично, мне нужна помощь в получении нижней границы.

Я пробовал:

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

Я также попытался с помощью последнего типа оф.

Я ищу решение CSS и решения Jquery

Answer 1

Почему у вас есть <div> внутри <li>? Вполне возможно без этого.

В любом случае, это то, как сделать это с JQuery:

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

Answer 2

:last-child не работает в IE7 (не уверен на IE8), так что вы должны сделать маршрут JQuery. Ваши 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 пока. Я считаю, что следующий самый безопасный способ реализовать его с помощью Jquery

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

Answer 6

Я не уверен, почему вам нужно «<div>» внутри «<li>», но если вам не нужно его можно было бы просто использовать:

ul > li:last-child { 

Я тестировал его и работал для меня в хроме, ie8, firefox и сафари.