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

如果您不使用navmenua 以外的任何东西ul，则不需要ul. 事实上，我猜测只有其中一个，在这种情况下你可以使用 ID 和#navmenu.

您可以通过在选择器之间使用来稍微提高效率>，因为这样它只需要向下搜索一层而不是潜在的无限数量。

至于li.home，您可能可以安全地假设 a 的任何直接子级都是 a ul，li因此该部分是多余的。

最终选择器：

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