Использовать эффективные селектор CSS

Question

Согласно странице 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> 

Я бы признателен за любую помощь в этом. Благодарю.

Answer 1

Если вы не используете navmenu для чего-либо кроме ul, вам не нужен ul. На самом деле, я бы сказал, что есть только один из них, и в этом случае вы можете использовать ID и #navmenu.

Вы можете улучшить эффективность, используя > между селекторами, потому что таким образом он должен искать только один слой вместо потенциально бесконечного числа.

Что касается li.home, вероятно, можно смело предположить, что любой прямой ребенок из ul будет li, так что часть излишним.

Итоговые селекторы:

#navmenu > li > a 
#navmenu > .home > a 
#navmenu > .home > a:hover