CSSで非常に非効率なルールは何ですか

Question

私はGoogleでスピードテストを実施しましたが、私はCSSに良い成績と悪い成績を取得しました。悪い成績は、非効率的なCSSによるものです。それは何ですか？それをどうやって修正することができますか？

Very inefficient rules (good to fix on any page): 
#menu ul ul li:first-child a:after Tag key with 4 descendant selectors 
#menu ul ul li:first-child a:hover:after Tag key with 4 descendant selectors 

Answer 1

ブラウザは、CSSセレクタを右から左に解析します。あなたが子孫セレクタをあまり持っていなければ、CSSはより高速に解析されます。 がキーと一致していること、各要素のために、ブラウザはまた、それが一致するものを見つけたり ルート要素に到達するまで は、すべての祖先要素を評価し、DOMツリーをトラバースしなければならない、ので

子孫セレクタは非効率的です。キーの具体的性が低いほど、評価する必要があるノードの数が多くなります。

Use efficient CSS selectors

---

関連：

Optimize css vs Google page speed is messing with me

Why do browsers match CSS selectors from right to left?