Torun seçici (boşluk)
Boşluk torun birleştiricisini öğrenirsin.
Torun birleştiricisi: boşluk
İki seçici arasına yalnızca boşluk bırakırsan torun birleştirici (descendant combinator) elde edersin. Soldaki öğenin içinde, herhangi bir derinlikte olan öğeleri hedefler.
article p yazarsan, bir article öğesinin içindeki tüm paragraflar seçilir — ister doğrudan çocuk, ister on kat derine gömülü olsun. Bu davranış, bileşen içindeki öğelere dokunmak için en sık kullanılan yoldur.
Derinliği önemsemez
Torun birleştiricinin gücü derinlik kayıtsızlığından gelir. Bir kart bileşeni içinde, section, div ya da blockquote içine gömülü olsun, .card p hepsini yakalar.
Bu esneklik, tema genelinde tipografi ayarı yapmak için idealdir. Tek satır, yüzlerce paragraf. Yalnızca tek bir seviyeye dokunmak istersen çocuk birleştiricisine geri dönersin.
Uygulama Yazı paragraflarına satır yüksekliği ver
Bir article p seçicisi yaz ve içine line-height: 1.6 bildirimi ekle. Yazı içindeki tüm paragraflar bu değeri alsın; derinlik önemli değil.
Örnek çözümü göster
/* yazı paragraflarını düzenle */
article p {
line-height: 1.6;
}Kendini test et
-
article p hangi paragrafları seçer?
article p { line-height: 1.6; }- Article içindeki tüm p'leri, derinlik önemli değil
- Yalnızca article'ın doğrudan çocuğu olan p'leri
- Article ile aynı seviyedeki p'leri
- Sayfadaki tüm p'leri
Cevabı göster
Article içindeki tüm p'leri, derinlik önemli değil — Doğru. Boşluk birleştiricisi article içindeki tüm paragrafları yakalar.
-
Article içindeki tüm paragrafları seç
____ { line-height: 1.6; }Cevabı göster
article p { line-height: 1.6; } -
Birleştiriciyi hedefine eşle
- article p
- Yazı içindeki paragraflar
- nav a
- Menü içindeki bağlantılar
- card p
- Kart içindeki paragraflar
- footer a
- Alt bölüm içindeki bağlantılar