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

99

Bir sınıf denilen a h1içindeki ilkini seçmeye çalışıyorum . Bunun içindeki ilk unsursa işe yarar , ancak bundan sonra gelirse işe yaramaz.divdetail_containerh1divul

<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>

Bunun h1neresinde olursa olsun sahip olduğum CSS'nin ilkini seçeceği izlenimine kapıldım div. Nasıl çalıştırabilirim?

css css-selectors

— Muffin Adam
kaynak

1

CSS ne yapamazsa, JavaScript yapabilir.

— JCOC611

11

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

— BoltClock

222

h1:first-childseçici aracı

Yalnızca ve yalnızca bir h1öğe ise , üst öğesinin ilk alt öğesini seçin .

Buradaki :first-childkonteyner ul, tatmin edici olamaz h1:first-child.

:first-of-typeDurumunuz için CSS3 var :

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

Ancak tarayıcı uyumluluğunun sıkıntıları varken, ilk önce h1bir sınıf vermeniz , sonra o sınıfı hedeflemeniz daha iyi olur :

.detail_container h1.first
{
    color: blue;
}

— BoltClock
kaynak

2

Şimdi anlıyorum, ancak standardı oluştururken her iki sürümü de uygulamış olmaları gerektiğini düşünüyorum.

— Kek Adam

IE9 sürümünde çalışmıyor. H1: geliştirici aracında bilinmeyen yazıyor

— Cine

11

Uyumluluk listesi arasında :first-of-typeselektör.

— Jess Telford

4

Daha yeni uyumluluk listesi arasında :first-of-type. Eski bağlantı yanlış.

— BadHorsie

Benim görüşüme göre, bu terimin :first-childanlaşılması net değil, çünkü öğeyi örneğin CSS seçici olarak tanımlıyorsunuz h1ve ardından, seçilen DOM düzeyinde hepsinin "ilk çocuğunu al" diye düşünüyorsunuz. Pek çok kez yanlış kullandım ... :first-of-typeSeçiciye alışmalıyız ve türünün ilk çocuğunu düşünmeliyiz .

— Kai Noack

15

:first-childilkini h1 ancak ve ancak üst öğesinin ilk çocuğu ise seçer . Örnekte, ulilk çocuğu olan div.

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

jQuery'nin :firstseçici size aradığınızı verir. Bunu yapabilirsiniz:

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

— Rob Sobers
kaynak

Hakkınız yanıltıcı, esas olarak kafam karıştı çünkü bunu daha önce yapmak için jQuery kullandım.

— Kek Adam

9

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 bunlar için bir sınıfınız olmalıdır.

— Grekz
kaynak

Herhangi bir sorunun olmamalı. İşte ref w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

Ayrıca kullanabilirsin

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

1 rakamını başka herhangi bir numara ile değiştirerek, diğer herhangi bir h1 öğesini seçebilirsiniz.

— Fabrice
kaynak

1

h1Etiketlerinizi bir başkasına sarabilirsiniz divve sonra ilki first-child. Bunun divstillere bile ihtiyacı yok. Bu sadece o çocukları ayırmanın bir yolu.

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

— GhostToast
kaynak

0

Öğe doğrudan <body>etiketinden devralınamaz . Bir <dir style="padding-left:0px;"></dir>etikete koymayı deneyebilirsiniz .

— Edmond Chow
kaynak