Bir sınıf adı ile *elementler 13* bir grup var:

<p class="red"></p>
<div class="red"></div>

Aşağıdaki CSS kuralını kullanarak: class="red" ile ilk elemanı seçmek için görünmüyor olabilir

.red:first-child{
  border:5px solid red;
}

Bu seçici olarak sorun nedir ve nasıl düzeltebilirim?

GÜNCELLEME:

Yorum için teşekkürler, unsur var ki durum böyle değil seçili almak için üst ilk çocuk olması gerektiğini anladım. Aşağıdaki yapısı var:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

ve bu kural yorumlarda belirtildiği gibi başarısız:

.home .red:first-child{
  border:1px solid red;
}

Nasıl sınıf red ile ilk alt hedef alabilir miyim?

Bu soru oldukça genel ve net olarak kurallı bir cevap için iyi bir yer olduğunu düşündüm, ama orijinal kabul cevabı tam olarak doğru değildir. Kabul cevabı bir sonraki bölümde kusurludur neden açıklayacağım, ama önce bunu doğru şekilde yapmak için nasıl ele alacağız.

* *54, CSS2, temsil tanıtıldıüst ilk çocuk. İşte bu kadar. Alt öğe koşulları bileşik seçici geri kalanı tarafından belirtilen maç ilk hangisi seçer web geliştiriciler arasında çok yaygın bir yanlış kanı var. İş seçiciler yolu nedeniyle (bir açıklama için here), bu sadece doğru değildir.

Öğe türünün kardeşler arasında ilk elemanı temsil eden Selectors level 3 introduces a :first-of-type pseudo-class,. Ancak, :first-child ile diğer koşulları ya da özellikleri görünmüyor. HTML, öğe türü etiket adı tarafından temsil edilir. Soru, bu tür p.

Ne yazık ki, sözde sınıf belirli bir sınıfın ilk alt öğe eşleştirmek için benzer :first-of-class var. Lea Verou ve bu tamamen bağımsız bir şekilde de olsa () ile gelen geçici stilleri uygulamaktırtümbu sınıf ile elemanları

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

""Sınıfı elemanları için stilleri . Geri Al o zaman ^em>ilk mesajdan sonra gelağır basan bir kural: the general sibling combinator ~ kullanarak

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Şimdi class="red" ile yalnızca ilk öğe bir sınır var.

Burada kuralların nasıl uygulandığını bir örnek:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Hayır kurallar uygulanır; kenarlık çizilir.
   Bu element, sınıf atlamış, bu yüzden red, yok.

2. Sadece ilk kuralı uygulanır; kırmızı bir kenarlık çizilir.
   Bu öğe red, ama bu sınıf ile herhangi bir öğe red öncesinde değil sınıfın üst etti. Böylece ikinci kural uygulanmış, sadece ilk değil, ve öğe sınırını tutar.

3. Hem kuralları uygulanır; kenarlık çizilir.
   Bu eleman 22* *sınıf vardır. Ayrıca sınıfı red ile en az bir diğer unsur tarafından önce gelmelidir. Kuralları uygulanır hem böylece, ve border beyan ikinci ilk geçersiz kılar, böylece "geri alma", tabiri caizse.

Bir bonus olarak, gerçi eklenmiştir Seçiciler 3, general kardeş kombinatorik aslında oldukça iyi tarafından desteklenen IE 7 ve daha yeni, aksine :first-of-type :nth-of-type() hangi sadece tarafından desteklenen Internet Explorer 9, daha ileriye. Eğer iyi bir tarayıcı desteğine ihtiyacınız varsa, şanslısınız.

Aslında, kardeş kombinatorik bu tekniğin en önemli kısmıvebu şaşırtıcı tarayıcı desteği, Bu teknik başka şeyler tarafından öğeleri filtreleme için uyarlayabilirsiniz çok kullanışlı, sınıf seçiciler ayrıca yapar:

• Kullanabilirsiniz bu sorunu çözmek için :first-of-type IE 7 ve IE8 tarafından, sadece temin tür seçici yerine bir sınıf seçici (tekrar, daha yanlış kullanımı burada bir sonraki bölüm):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }
  

• attribute selectors ya da sınıflar yerine başka basit seçiciler göre filtre uygulayabilirsiniz.

• Ayrıca sözde elemanlar teknik olarak basit seçiciler değilsin pseudo-elements bu ağır basan teknik birleştirebilirsiniz.

Bu iş için varsayılan stilleri ilk kuralı geçersiz kılabilirsiniz, böylece diğer kardeş senin elemanlar için ne olacağını önceden bilmek gerekir. Bu CSS geçersiz kılma kuralları içerir beri ayrıca, Selectors API Selenium'bulma s CSS ile kullanmak için tek bir seçici ile aynı şeyi elde edemezsin

Bu kayda değer olduğunu Seçiciler 4 tanıtır an extension to the :nth-child() notation (aslında tamamen yeni bir pseudo-sınıf adı :nth-match()) sağlayacak kullanmak gibi bir şey :nth-child(1 of .red) yerine bir varsayımsal .red:first-of-class. Nispeten yeni bir öneri, henüz hayata geçmedi. Umarım bu yakında değişecek. Bu arada önerdiğim çözüm çoğu durumda çalışmalıdır.

Bu soruya cevap verin, belirli bir sınıf her ilk çocuk eleman arayan varsayar unutmayın. Ne pseudo-sınıf ne de karmaşık bir seçici N. maç için genel bir CSS çözümü bile varbelgenin bütününde— ister bir çözüm ağır belge yapısına bağlıdır var. jQuery:eq(), :first, :last ve bu amaç için daha fazla, ama they function very differently from :nth-child() et al unutmayın. Seçici API kullanarak, ya document.querySelector() ilk maçı almak için kullanabilirsiniz:

var first = document.querySelector('.home > .red');

Ya da herhangi bir özel maç almak için bir dizin oluşturucu document.querySelectorAll() kullanın:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redeElements[1];
// etc

Ancak .red:nth-of-type(1) çözüm orijinal kabul cevap Philip Daubmeier işleri için (başlangıçta yazan Martyn ama silinmiş beri) değil, bu şekilde hareket edeceğini bekliyoruz.

Eğer sadece p seçmek istiyorsa, özgün biçimlendirme, örneğin:

<p class="red"></p>
<div class="red"></div>

O zaman sen insan değilsin .red:first-of-type (eşdeğer .red:nth-of-type(1)), çünkü her öğe ilk (ve sadece) bir türü (p div sırasıyla)her ikisi deseçici ile uyumlu olacak.

Belli bir sınıfın ilk öğeayrıca türünün ilk örneğipseudo-sınıf çalışır, ama ., ^strong>bu sadece tesadüf olur. Bu davranış, Philip cevabı gösterilmiştir. Bu eleman daha önce aynı türden bir öğe soktuğun an, seçici başarısız olur. Güncel biçimlendirme alarak:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.red:first-of-type ile bir kural uygulayarak çalışır, ama bir kez sınıf olmadan: p başka bir ekleyin

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Seçici .red ilk eleman artık çünkü hemen başarısız olurikincip element.