Kullanımı: Sınıf seçicisi olan son çocuk

Question

Son/saniye .heading stilini oluşturmak istiyorum. Benim için

<ul> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
    <li>Hello world</li> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
</ul> 

Ne

ul li.heading:last-child { 
    background: black; 
} 

ne de

ul li.heading:nth-child(2) { 
    background: black; 
} 

çalışır. Neden ve bu stilleri <li>'a nasıl uygularım? Sahte sınıf seçmenler sınıf seçmenleriyle çalışmıyor gibi görünüyor. Daha önce kullandığım yemin edemem garipti.

Güncelleme: Oops, tamamen the jsfiddle unuttu.

Answer 1

İfadende oldu: "Ben ikinci/son .heading stil vermek istersek" Bu ul

birinci ve dördüncü çocuğu bu bir deneyin olduğunu

<ul> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
</ul> 

Ve CSS: Eğer böyle kod yazmak zorunda olacağı anlamına gelecektir

Else

ul li.heading:last-child { 
    background: black; 
} 
ul li.heading:nth-child(2) { 
    background: black; 
} 

, geçerli html-kodu ile şu yazılır:

ul li.heading:nth-child(4) { 
    background: black; 
} 
ul li.heading:nth-child(1) { 
    background: black; 
} 

Düşüncenizi anlıyorum, ancak "başlık" sınıfındaki lis ikinci veya son çocuk değil.

Answer 2

Bunun nedeni, li.heading'un son çocuk olmaması ve ikinci çocuğun olmamasıdır.

ul li.heading:nth-child(4) { 
    background: black; 
} 

Answer 3

ul li.heading:nth-last-child(2) 

2 Eğer < li class = "başlığı" sonra ne kadar <li> birçok biliyor demektir bizim durumumuzda > o alttan ikinci sırada.