1

PageSpeed によると、私の新しい CSS スプライト ナビゲーションは効率的な CSS セレクターを使用していません。

誰かが私が間違っていることを教えてもらえますか?

Very inefficient rules (good to fix on any page):
ul.navmenu li a    Tag key with 2 descendant selectors and Class overly qualified with tag
ul.navmenu li.home a    Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
ul.navmenu li.home a:hover    Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag

私のCSS：

ul.navmenu li a { display: block; background: url('/styles/pc-nav-sprite.png'); }
ul.navmenu li.home a { background-position: 0 -486px; width: 187px; height: 24px; margin-top: 16px;}
ul.navmenu li.home a:hover { background-position: 0 -511px; width: 187px; height: 24px; }

HTML :

<ul class="navmenu">
<li class="home"><a class="selected" title="Home"></a></li>
<li class="forum"><a href="/forum/" title="Forum"><span class="displace">Forum</span></a></li>
...
...
</ul>

これについて何か助けていただければ幸いです。ありがとう。

4

1 に答える 1

-1

を使用navmenuしてulいない場合は、は必要ありませんul。実際、大げさな推測では、IDとを使用できるのはそのうちの1つだけだと思います#navmenu。

セレクター間を使用すると、効率をわずかに向上させることができます>。これにより、無限の可能性のある数ではなく、1つのレイヤーを検索するだけで済みます。

についてはli.home、おそらく、aの直接の子はすべてであると安全に想定できるulためli、その部分は冗長です。

最終セレクター：

#navmenu > li > a
#navmenu > .home > a
#navmenu > .home > a:hover
于 2012-04-23T20:15:14.797 に答える