Neden bu CSS: İlk çocuk seçici çalışıyor?

Question

Bir Asp.Net MVC 3 proje üzerinde çalışıyorum ve sanırım gerekir gibi bu işe yaramazsa neden bir tuğla duvar içine doldu.

Benim biçimlendirme geçerli:

<fieldset> 
    <input type="hidden" value="2"> 
    <div class="editor-label"> 
     <label for="Name"> Name</label> 
    </div> 
    ... 
</fieldset> 

Benim css geçerli:

.display-label, .editor-label 
{ 
    margin: 0.8em 0 0 0; 
    font-weight: bold; 
    display: inline; 
} 

fieldset > div:first-child 
{ 
    margin: 0; 
} 

ben fieldset ilk div yapmak yapmak istediğim tek şey seçicinin düşündüm 0'a bir marj var fieldset > div:first-child, stili "türünü div olan bir alan kümesinin ilk çocuğu" olarak uygular, ancak görünüşe göre bir şey beni aldatır. Benim seçicileri ile karıştırmasını Eski bir tarayıcı değil yani

Ben IE9/FF/Chrome'da bu denedim.

Teşekkürler.

Answer 1

fieldset > div:first-child "bir div olan bir fieldset eğer ilk alt öğesi seçmek" anlamına gelir.

Bu demek "fieldset ilk div select" vermez.

bu durumda ilk çocuk <input type="hidden" value="2"> olduğunu.

HTML değiştirmeden bu div seçmek için, fieldset > div:first-of-type kullanmak gerekir.

Ne yazık ki, :first-child yaygın olarak desteklenirken, :first-of-type yalnızca IE9 + ve diğer modern tarayıcılarda çalışır.

Bu durumda, en iyi düzeltme fieldset > div:first-child kullanmaya devam etmek ve <input type="hidden" value="2">'u taşımaktır, bu yüzden ilk çocuk değil.