CSSの複数の子セレクタと単一のタグセレクタのパフォーマンス

Question

理論的にはCSSの子セレクタがタグセレクタより効率的です。しかし、あなたがクラスを持っていて、このクラス要素内の特定のタグをスタイルする必要がありますが、それらは最初のレベルの子ではありません。

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

これらの優れたCSSのパフォーマンスの練習です

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

VS：

は例を見てみましょうか？

MDNパー

Answer 1

：子孫セレクタを避け〜

子孫セレクタはCSSの中で最も高価なセレクタです。が恐ろしくで、セレクタがタグまたはユニバーサルカテゴリにある場合は特に高価です。あなたは子孫セレクタと、CSSエンジンは（この場合tdタグ内）の一致を探している（この場合.styled-tableで）親要素のそれぞれの子をチェックし、論理的を通してそれを考える場合

し、各それらの子供の子供など、など。

子セレクタを使用すると、一致するものを探すためにどの「パス」を正確にエンジンに伝えているのでしょうか。パスの任意のポイントで一致するものが見つからない場合（たとえば、.styled-tableに直接の子の1つとしてtbodyがない場合）、セレクタを放棄します。