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

Question

Согласно PageSpeed, моя новая навигация css sprites не использует эффективные селекторы 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