css - 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 ツリーを上に移動し、一致する要素が見つかるかルート要素に到達するまで、すべての祖先要素を評価する必要があるためです。キーの具体性が低いほど、評価する必要があるノードの数が多くなります。

効率的な CSS セレクターを使用する

---

関連している：

css と Google ページの速度を最適化するのが面倒

ブラウザーが CSS セレクターを右から左に照合するのはなぜですか?