CSS'de tüm alt öğeleri özyinelemeli olarak seçme

407

Tüm alt öğeleri özyinelemeli olarak nasıl seçebilirsiniz?

div.dropdown, div.dropdown > * {
    color: red;
}

Bu sınıf yalnızca tanımlanan className ve tüm yakın çocuklara bir sınıf atar. Basit bir şekilde, aşağıdaki gibi tüm childNodes'ları nasıl seçebilirsiniz:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors

— clarkk
kaynak

Yanıtlar:

621

Bir öğenin tüm alt öğelerini eşleştirmek için beyaz boşluk kullanın :

div.dropdown * {
    color: red;
}

x yx içindeki her eleman y ile eşleşir , ancak derin yuvalanmış olabilir - çocuklar, torunlar vb.

Yıldız işareti *herhangi bir öğeyle eşleşir.

Resmi Şartname: CSS 2.1: Bölüm 5.5: Soyundan Seçiciler

— anroesti
kaynak

çalışır, ancak şimdi daha yüksek önceliğe sahip olsalar bile diğer tüm sınıfları geçersiz kılar .. (daha sonra css dosyasına yerleştirilir)

— clarkk

Seçici aynı zamanda özelliklerin yalnızca önceliğinde bulundukları dosyada değil, hangi önceliğe sahip olduğu konusunda da rol oynar. Değerlerinize `! color: red !important;

— İmportant`

Biliyorum, biraz çirkin. Bunun yerine daha hassas seçiciler yazmayı deneyebilirsiniz, şansınız bu işe yarar. (örn. #head ul→ #head ul#navi)

— anroesti

Tamam, çok temel bir örnek: p.xybundan daha önemlidir p, çünkü biraz daha spesifiktir. jsfiddle.net/ftJVX

— anroesti

Belirli bir sınıfa sahip tüm çocuğu istersem ne olur?

— MEM

144

Kural aşağıdaki gibidir:

A B

A'nın torunu olarak B

A > B

B'nin A çocuğu olarak

Yani

div.dropdown *

ve yok

div.dropdown > *

— Abdennour TOUMI
kaynak