使用高效的CSS选择器

问题描述：

根据PageSpeed，我的新CSS导航没有使用高效的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>

我会很感激任何与此帮助。谢谢。

阅读警告消息。您的选择器比绝对必要的更具体。 – 2012-04-23 20:13:47

这不是一个“精灵”问题。保持原样，或者至少删除标签名称（例如'ul.navmenu li.home a' - >'.navmenu .home a'）。但对我而言，这很好。 – 2012-04-23 20:14:49

这是**不可能**知道什么是有效的（或什么将*工作*）没有看到HTML代码...你可以请张贴吗？还要指定是否打开修改HTML源代码。 – 2012-04-23 20:16:48

答

如果您对ul以外的东西不使用navmenu，则不需要ul。事实上，我想说只有其中的一种，在这种情况下，您可以使用ID和#navmenu。

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

至于li.home，你也许可以安全地假定ul的任何直接的孩子将是一个li，所以这部分的冗余。

最终选择：

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

使用高效的CSS选择器

相关推荐