Yalnızca ilk doğrudan çocuk için bir CSS seçici var mı?

Aşağıdaki html var

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

Ve aşağıdaki stil:

DIV.section DIV:first-child 
{
  ...
}

Nedense stil "alt içeriği 1" <div> yanı sıra "üstbilgi" uygulanmaktadır anlamıyorum <div>.

Stil üzerindeki seçicinin sadece "bölüm" adı verilen bir sınıfın ilk doğrudan çocuğuna uygulanacağını düşündüm. İstediğimi elde etmek için seçiciyi nasıl değiştirebilirim?

Kelimenin tam anlamıyla yayınladığınız "Bölüm div'lerinin içindeki ve üst öğelerinin ilk çocuğu olan tüm div'leri bul" anlamına gelir. Alt, bu açıklamayla eşleşen bir etiket içeriyor.

Ana div'in her iki çocuğunu da isteyip istemediğiniz benim için net değil. Öyleyse, bunu kullanın:

div.section > div

Yalnızca üstbilgiyi istiyorsanız, şunu kullanın:

div.section > div:first-child

Kullanılması >için açıklama değiştirir: ne istiyorsun "bölümü div doğrudan torunları herhangi div'leri bul".

IE6 hariç tüm büyük tarayıcıların bu yöntemi desteklediğini lütfen unutmayın. IE6 desteği görev açısından kritikse, alt div'lere sınıflar eklemeniz ve bunun yerine bunu kullanmanız gerekir. Aksi takdirde, önemsemeye değmez.

Google'da arama yaparak bu soruyu buldu. Bu, çocuğun containerne tür olduğuna bakılmaksızın sınıflı bir öğenin ilk çocuğunu döndürür .

.container > *:first-child
{
}

CSS, kurallar devralındığından Basamaklı Stil Sayfaları olarak adlandırılır. Aşağıdaki seçici kullanarak, olacak ebeveynin sadece direkt çocuğu seçmek ama kuralları edilecektir kalıtsal Bununla divbireyin çocukları divs:

div.section > div { color: red }

Şimdi, hem bu div hem de çocukları olacak red. Devralmasını istemiyorsanız üst öğe için ayarladığınız her şeyi iptal etmeniz gerekir:

div.section > div { color: red }
div.section > div div { color: black }

Şimdi sadece divdoğrudan bir çocuk olan bekar div.sectionkırmızı olacak, ama çocukları divshala siyah olacak.

div.section > div

Kullanın div.section > div.

Daha da iyisi, eski tarayıcıları (hakkında bilmeyen ) desteklemek ve biçimlendirmenizi semantik tutmak için <h1>başlık ve CSS'niz için bir etiket kullanın .div.section h1>

Durumunuzdaki doğrudan ilk çocuk için CSS seçici:

.section > :first-child

Doğrudan seçici> ve ilk çocuk seçici: ilk çocuk

Aşağıdakilerden önce bir yıldız işaretine gerek yok: diğerlerinin önerdiği gibi. Etiketi ekleyerek bu çözümü değiştirerek DOM aramasını hızlandırabilirsiniz:

div.section > :first-child