: ilk-çocuk beklendiği gibi çalışmıyor

div içinde ilk h1'u detail_container adlı bir sınıfla seçmeye çalışıyorum. Bu h1 bu div içinde ilk öğe ise, ancak bu ul sonra gelirse, işe yaramazsa çalışır. : ilk-çocuk beklendiği gibi çalışmıyor

<style type="text/css"> 
.detail_container h1:first-child 
{ 
color:blue; 
} 
</style> 
</head> 
<body> 
<div class="detail_container"> 
    <ul> 
    <li></li> 
    <li></li> 
    </ul> 
    <h1>First H1</h1> 
    <h1>Second H1</h1> 
</div> 
</body> 
</html>

Ben bu div içinde nerede olduğunu var CSS olursa olsun ilk h1 seçecek izlenim oldu. Nasıl çalıştırabilirim?

kaynak

2010-12-22 The Muffin Man

CSS ne yapamazsa yapamazsın, JavaScript yapabilir. – JCOC611

Bu, CSS3 ile yapabileceğiniz bir şey :) :) – BoltClock

152

h1:first-child seçici

kendi üst
ancak ve ancak bir h1 eleman ise birinci çocuğu seçin anlamına gelir. Burada konteyner :first-child

ul olan ve bu şekilde h1:first-child karşılayamamaktadır.

CSS3 en :first-of-type dava için vardır:

.detail_container h1.first 
{ 
    color: blue; 
}

kaynak

2010-12-22 02:37:10 BoltClock

Şimdi anlıyorum, ancak standardı oluşturduklarında her iki versiyonu da uygulamalıdırlar. –

IE9 sürümünde çalışmıyor. Bu h1: geliştirici aracı – Cine

[Uyumluluk listesi] 'nin (http://www.quirksmode.org/css/contents.html#t34) '' birinci-tür' seçicisinde bilinmeyen olduğunu söylüyor. –

:first-child kendi üst elemanın ilk çocuğu ancak ve ancak eğer ilk h1seçer. Örneğinizde, ul, div'un ilk çocuğudur.

Sözde sınıfın adı biraz yanıltıcıdır, ancak açıklamasında oldukça açık bir şekilde here açıklanmıştır.

jQuery'nin :first seçiciyi ne aradığınızı gösterir. Bunu yapabilirsiniz:

$('.detail_container h1:first').css("color", "blue");

kaynak

2010-12-22 02:35:23

Peki, bunu nasıl yapacağım? –

Sizin hakkınız yanıltıcıdır, daha önce bunu yapmak için jQuery kullanmış olduğum için çoğunlukla kafam karışmıştı. –

.detail_container h1:first-of-type 
{ 
    color: blue; 
}

Ama tarayıcı uyumluluğu sıkıntılardan ve etajer ile, daha sonra o sınıfı hedefleyen bir sınıf birinci h1 vererek daha iyiyiz

Bu özel durum için şunları kullanabilirsiniz:

.detail_container > ul + h1{ 
    color: blue; 
}

Ancak, birçok durumda aynı seçiciye ihtiyacınız varsa, BoltClock'un dediği gibi, bunun için bir sınıfa sahip olmanız gerekir.

kaynak

2010-12-22 23:19:23 Grekz

güzel iş! - Bu tarayıcıda nasıl kabul edilir? –

Herhangi bir sorunla karşılaşmamalısınız. İşte ref http://www.w3.org/TR/CSS2/selector.html#child-selectors – Grekz

h1 etiketlerinizi başka bir div ürününe sardığınızda, birincisi first-child olacaktır. div'un stillere bile ihtiyacı yoktur. Bu çocukları ayırmanın bir yolu.

<div class="h1-holder"> 
    <h1>Title 1</h1> 
    <h1>Title 2</h1> 
</div>

kaynak

2012-05-09 16:47:41 GhostToast

da başka h1 öğeyi seçebilir başka sayısına göre sayısını 1 değiştirerek

.detail_container h1:nth-of-type(1)

kullanabilirsiniz.

kaynak

2014-03-14 08:37:05 user3419033

: ilk-çocuk beklendiği gibi çalışmıyor

cevap

İlgili konular