根據PageSpeed，我的CSS沒有使用高效的CSS選擇器

Question

根據PageSpeed，我的CSS沒有使用高效的CSS選擇器。

有人能告訴我知道我在做什麼錯嗎？

我的CSS：

#header .link-bar .fl .last a:hover 
div.box-default div.box-caption .box-title a 
.news ul li div.top a 
.news ul li div.top a:visited 
.news ul li div.top a:hover 
.link-bar ul li 
#header .link-bar a 
#header .link-bar a:visited 
#header .link-bar .last a 
#header .link-bar a:hover 
#header .link-bar .last a:hover 
#header .link-bar .fl a:hover 
#footer .link-bar a 
#footer .link-bar a:visited 
#footer ul li 
div.list ul 
div.list li 
.ads ul li 
.news ul li 
#paging_button ul li 
#paging_button ul li:hover 
.tt_wrap .ttbox span 
#paging_button ul li:hover 

千恩萬謝。

Answer 1

您的選擇器可能太具體，瀏覽器從右向左閱讀CSS，而不是從左向右閱讀。 所以.link-bar ul li比#header .link-bar ul li更快

這也意味着最右邊的選擇器是最重要的性能。如果你可以添加類到最右邊的元素，它會幫助很多.news ul li div.top a VS .news ul li div.top a.top-link

看看這個Why do browsers match CSS selectors from right to left?

Answer 2

不知道你的CSS做和你的理由安排像這樣，如何/在其正使用和頁面正在做什麼沒有正確的答案。

PageSpeed告訴你的是，有一些非常快速的選擇器可以讓你快速找到一件物品，還有一些效率較低的選擇器可以讓CSS引擎在找到你想要的東西之前拖拽一下。兩者都會應用你想要的風格，一種類型的CPU週期比其他類型少，但在大多數情況下，我們在這裏和那裏談論幾個CPU週期，而不是幾秒鐘。瀏覽器運行的瀏覽器和瀏覽器本身比選擇器本身具有更顯着的影響。所以這只是意味着在你的CSS中你有一些效率較低的選擇器。

例如，您可以編寫像這樣的規則（使用嵌套元素），並且您清楚地看到了其中的一些規則。

ul li {color: blue;} 
ol li {color: red;} 

但同樣，更有效，你可以這樣做（單一類選擇） - 但是你需要改變你的加價來支持李和在這個過程中增加除了這些類的'重量'你的網頁。

.ul-li {color: blue;} 
.ol-li {color: red;} 

不，這相當簡單的例子將作出顯著差異無論哪種方式，但在渲染速度是至關重要的，你快速的網絡或舊的/不那麼強大的機器在本地工作那麼它可能還清。如果您必須通過非常慢的連接發送到遠程瀏覽器，而不是增加發送的有效負載可能會讓事情變得更糟。

基本上，每次你把這些中的任何一個都比不這樣做的效率低。

Rules with descendant selectors 
Rules with child or adjacent selectors 
Rules with overly qualified selectors 
Rules that apply the :hover pseudo-selector to non-link elements 

過於合格的選擇是當你使用很多選擇去同一個地方

div.box-default div.box-caption .box-title a 

做以下給出相同的結果還是有很多箱瓷磚可能在頁面上？

.box-title a 

它也是大量的工作來建立CSS文件和標記，沒有任何這些。

對這些是什麼（REACH法規類型的示例），請參閱以下鏈接瞭解更多信息：
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors