CSS aşağıdaki kodu var Diyelim ki belirli özniteliği

Question

ile elementlerden ilk çocuğu belirleyin:

<node> 
    <element bla="1"/> 
    <element bla="2"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="4"/> 
</node> 

Nasıl 3'e eşit özellik ilk çocuğu seçme hakkında gitmek? Ben belki de bu işi yapabileceğini düşünüyordum:

element[bla="3"]:first-child 

... ama :first-child sözde sınıfı yalnızca ilk çocuk düğüm bakar

Answer 1

işe yaramadı, bu yüzden ilk çocuk yoksa herhangi' t element[bla="3"], sonra hiçbir şey seçilmez.

Öznitelikler için benzer bir filtre sözde sınıfı yok. Bu etrafında kolay bir yolu, her biri daha sonra (bu hüner here ve here açıklanmıştır) ilk sonra ne dışlamak seçmektir:

element[bla="3"] { 
} 

element[bla="3"] ~ element[bla="3"] { 
    /* Reverse the above rule */ 
} 

Bu, elbette, sadece stilleri uygulamak için çalışır; Eğer (İşaretlemeniz HTML yerine keyfi XML gibi görünen beri) stil dışındaki amaçlar için o öğeyi seçmek istiyorsanız, size document.querySelector() gibi başka bir şeyi kullanmak gerekecektir:

var firstChildWithAttr = document.querySelector('element[bla="3"]'); 

Veya bir XPath ifadesi:

//element[@bla='3'][1]