CSS が何をするのか、CSS をこのように配置する理由、どのように / どこで使用されているのか、ページで何が行われているのかを知らなければ、正しい答えはありません。
PageSpeed が伝えているのは、非常に効率的なセレクターが実際に非常に迅速にアイテムに到達することと、CSS エンジンが意図したものを見つける前に少しトロールするあまり効率的でないセレクターがあることだけです。どちらも希望するスタイルを適用します。一方のタイプは他方よりも CPU サイクルが少なくてすみますが、ほとんどの場合、数秒ではなく、あちこちで数回の CPU サイクルについて話しているのです。ブラウザーが実行されているマシンとブラウザー自体は、セレクター自体よりもはるかに大きな影響を与えます。したがって、これは、CSS に効率の悪いセレクターがいくつかあることを意味します。
たとえば、このようなルールを (ネストされた要素を使用して) 記述でき、これらのいくつかは明らかに存在します。
ul li {color: blue;}
ol li {color: red;}
しかし、同様に効率的にこれを行うこともできます (単一のクラス セレクター)。
.ul-li {color: blue;}
.ol-li {color: red;}
このかなり些細な例がどちらの方法でも大きな違いを生むわけではありませんが、レンダリング速度が重要であり、ローカルで高速ネットワーク上で作業している場合、または古い/あまり強力でないマシンで作業している場合は、うまくいく可能性があります. 非常に遅い接続でリモート ブラウザに送信する必要がある場合は、送信するペイロードを増やすと事態が悪化する可能性があります。
基本的に、これらのいずれかを配置するたびに、そうしないよりも非効率的です。
Rules with descendant selectors
Rules with child or adjacent selectors
Rules with overly qualified selectors
Rules that apply the :hover pseudo-selector to non-link elements
過度に修飾されたセレクターは、同じ場所に到達するために多くのセレクターを使用する場合です
div.box-default div.box-caption .box-title a
次の結果は同じですか、それともページに多くのボックス タイルがある可能性がありますか?
.box-title a
また、これらのいずれも持たない CSS ファイルとマークアップを作成するのにも、かなりの量の作業が必要です。
これらの詳細 (リーチ タイプの例を含む) については、次のリンクを参照してください:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
http://www.w3.org /TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors