Sonraki öğe için CSS'de seçici için sözdizimi nedir?

200

Bir başlık etiketim varsa <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

ve bundan sonra bir paragrafım var <p>stuff here</p>.

Takip eden her <p>etiketin CSS kullanmasını nasıl sağlayabilirim h1.hc-reform:clear:both;

bu olur mu?

h1.hc-reform > p{
     clear:both;
}

nedense bu işe yaramıyor.

— tony noriega
kaynak

397

Buna bitişik kardeş seçici denir ve artı işaretiyle temsil edilir ...

h1.hc-reform + p {
  clear:both;
}

Not: IE6 veya daha eski sürümlerde desteklenmez.

— Josh Stodola
kaynak

4

Bu sadece phemen sonra gelenleri seçecektir h1.hc-reform. Daha sonra, sadece şamandırayı clear: bothtemizlediği için çalışması için uygulanması gereken tek kişi olabilir h1, bu yüzden hala geçerli bir cevap.

— BoltClock

@BoltClock Evet, haklısın, teknik özellikleri yanlış okudum ve yanlış olduğu için bu yorumu sildim. Bu seçici yalnızca phemen öncesinde gelenle eşleşir h1.hc-reform(elbette aynı ana öğeyle).

— Josh Stodola

4

vay bitişik kardeş seçici hakkında bilmiyordum. Güzel, teşekkürler!

— teori

1

~ bu durumda daha iyi bir seçicidir. İşte çalışan bir JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

ilk öğenin herhangi bir çocuğu varsa bunun işe yaramadığını belirtmek gerekir

— 72GM

60

Kardeş seçiciyi kullanabilirsiniz ~:

h1.hc-reform ~ p{
     clear:both;
}

Bu sadece birincisini değil, psonra gelen tüm öğeleri seçer .hc-reform.

— Stephan Muller
kaynak

İlk bağlantıdaki IE hataları belirsiz kenar durumu şeyleridir, bu yüzden muhtemelen quirksmode onlara bakmaktadır.

— Balta.

14

hayır >, bir çocuk seçici.

istediğin +

o zaman dene h1.hc-reform + p

tarayıcı desteği harika değil

— Moin Zaman
kaynak

2020: On yıl sonra tarayıcı desteği harika. Sadece CSS acemileri için bir bilgi.

— AlexioVay

8

>Bir olan çocuk seçici . HTML'niz şöyle görünüyorsa:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... o zaman biletiniz.

Ancak HTML'niz şöyle görünürse:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Ardından bitişik seçiciyi istiyorsunuz :

h1.hc-reform + p{
     clear:both;
}

— Richard JP Le Guen
kaynak

4

Umarım o h1 's içinde p's yuva yoktu .. Ayrıca, bitişik sadece ilk p seçer.

— Stephan Muller

2

Tam olarak değil. h1.hc-reform > pVasıta "Herhangi ptam olarak bir seviye altına h1.hc-reform".

Ne istiyorsun h1.hc-reform + p. Tabii ki, bu Internet Explorer'ın eski sürümlerinde bazı sorunlara neden olabilir; sayfayı eski IE'lerle uyumlu hale getirmek istiyorsanız, paragraflara manuel olarak bir sınıf ekleme veya bazı JavaScript kullanma (örneğin, jQuery'de, örneğin, böyle bir şey yapabilirsiniz $('h1.hc-reform').next('p').addClass('first-paragraph')) ile sıkışmış olacaksınız .

Daha fazla bilgi: http://www.w3.org/TR/CSS2/selector.html veya http://css-tricks.com/child-and-sibling-selectors/

— Justin Russell
kaynak