使用高效的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 Brian Smith

閱讀警告消息。您的選擇器比絕對必要的更具體。 – 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

-1

如果您對ul以外的東西不使用navmenu，則不需要ul。事實上，我想說只有其中的一種，在這種情況下，您可以使用ID和#navmenu。

您可以通過在選擇器之間使用>來稍微提高效率，因爲這樣它只需要搜索一個圖層而不是可能的無限數量。

至於li.home，你也許可以安全地假定ul的任何直接的孩子將是一個li，所以這部分的冗餘。

最終選擇：

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

來源

2012-04-23 20:15:14

使用高效的CSS選擇器

回答

相關問題