2016-04-27 32 views
5

Teorik olarak CSS çocuk seçicileri, etiket seçicilerden daha verimlidir. Ancak, bir dersiniz olduğunda ve bu sınıf öğesinin içinde belirli bir etiketi biçimlendirmeniz gerektiğinde ne olur, ancak birinci seviye bir çocuk değiller?CSS çoklu çocuk seçici vs tekli etiket seçici performansı

.styled-table td{ 
    // Some cell styles 
} 

bunlardan daha iyi bir CSS performansı uygulamadır

.styled-table > tbody > tr > td{ 
    // Some cell styles 
} 

VS:

Bir örnek görelim? MDN Başına

+1

"Fakat bir sınıfınız olduğunda ne olur ve bu sınıf öğesinin içinde belirli bir etiket oluşturmanız gerekir, ancak bunlar birinci düzey bir çocuk değil midir?" Sonra performans tamamen ilgisiz hale gelir. – BoltClock

+1

CSS, sağdan sola tercüman tarafından okunur, daha kısa seçiciler === daha fazla performans. –

cevap

5

: soyundan seçici kaçının ~

soyundan seçici CSS en pahalı seçici olduğunu..dreadfully pahalıdır - özellikle seçici Etiket veya Evrensel Kategoride ise. Eğer soyundan seçici ile CSS motoru (bu durumda td etiket olarak) maçları arayan (bu durumda .styled-table olarak) ana elemanın her çocuk kontrol edecek, mantıksal aracılığıyla düşünüyorsanız

ve ardından her O çocukların ve benzerlerinin çocuğu.

Bir çocuk seçicide, bir eşleşme aramak için motoru tam olarak hangi "yol" izleyeceğini söylüyorsunuz. Yoldaki herhangi bir noktada bir eşleşme bulamazsa (ör., .styled-table'un kendi çocuklarından biri olan tbody yoksa), seçiciyi terk edecektir.

+0

MDN dökümantasyonuna gönderdiğiniz link, bu kılavuzların 2000 yılında yazıldığı ve modern tarayıcılarla artık ilgisi olmadığı da bildirildi. – fbid

+1

Oops, Bunu biliyordum, ancak Google'a geldiğinde, 15 Ocak 2016 tarihi vardı, bu yüzden güncellendiğini varsaydım. Birazcık daha fazla Googling, her iki seçicinin, diğer seçmenlere göre hala zayıf bir performansa sahip olduğunu ve çocuk seçicinin torun seçiminden daha iyi performans gösterdiğini ortaya koyuyor. – Shaggy