0

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

非常感谢。

4

2 回答 2

2

您的选择器可能过于具体，浏览器从右到左而不是从左到右读取 CSS。所以.link-bar ul li比#header .link-bar ul li

这也意味着最右边的选择器对性能最重要。如果您可以将类添加到最右边的元素，那将有很大.news ul li div.top a帮助.news ul li div.top a.top-link

看看这个为什么浏览器从右到左匹配 CSS 选择器？

于 2012-08-11T14:47:37.310 回答
0

如果不知道您的 CSS 做了什么，以及您这样安排它的原因，以及它的使用方式/位置以及页面的处理方式，则没有正确的答案。

PageSpeed 告诉你的是，有一些非常有效的选择器确实可以让你非常快速地找到一个项目，而一些效率较低的选择器会导致 CSS 引擎在找到你想要的东西之前进行一些搜索。两者都将应用您想要的样式，一种类型比另一种类型占用更少的 CPU 周期，但在大多数情况下，我们在这里和那里谈论几个 CPU 周期，而不是几秒钟。运行浏览器的机器和浏览器本身比选择器本身的影响要大得多。所以这只是意味着在你的 CSS 中你有一些效率较低的选择器。

例如，您可以编写这样的规则（带有嵌套元素），并且您显然拥有其中的一些。

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

但同样更有效的是，您可以这样做（单个类选择器） - 但是您需要更改标记以支持在 li 上添加这些类，并在此过程中增加页面的“权重”。

.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 文件和标记也需要大量工作。

有关这些是什么的更多信息（包括范围类型的示例），请参阅以下链接：
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

于 2012-08-11T15:14:07.650 回答