css - 根据 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?