近似翻译

这篇文章大部分内容并非我的原创，参考文章有：

从右向左渲染

我一直以为浏览器是将CSS选择器进行从左往右进行渲染的，直到现在才知道事实并非如此，比如：

ul>li a[title="home"]

按我以前的理解，浏览器先找到所有的ul，然后再找到它下面的li,随之找到li下面所有具有title="home"的a，而实际上不是这样的。。。

实际上，最先找到的是所有的a[title="home"]，然后再看看它的父级是不是li,最后才看看li的父级是不是有ul。

ID选择器效率最高，群集选择(*)效果最低

在CSS中的最主要的选择器有以下几种：

  • ID选择
  • class选择
  • 标签选择
  • 群集选择(例如通配符*、属性选择[title=”home”]）

比如：

#main-navigation {   }      /* ID (最快) */
.main-navigation {   }      /* Class */
ul li a {  }                /* 标签 */
* {   }                     /* 群集 (最慢) */
#content [title='home']     /* 群集 (最慢) */

按照“从右向左”的思想，现在看类似于#nav ul li a这样的选择器是非常慢的。

不要添加标签前缀

比如：

ul#nav {  }

ID本来就是惟一的，所以再给它添加一个标签前缀绝对是多余的。当然对于CLASS，尽量也不要这样做。

后代选择器

也就是上面说到的：

#nav ul li a

想要浏览器高效的渲染的话，可以给#nav下面的a加一个class。

我现在才知道为什么facebook,twitter,youtube的HTML写的这么复杂，几乎每个标签都有class:

youtube

twitter

facebook

选择合适的元素添加合适的CSS

比如这样的代码：

#nav li a { font-family: Georgia, Serif; }

这样写无疑给浏览器增加了负担，可以直接改成：

#nav { font-family: Georgia, Serif; }

我的一些看法

首选，我对这个“从右向左”的渲染方式感到非常的疑惑，而这个又是关于浏览器和CSS非常底层的东西，所以我表示很无奈，所以只能尽量的靠近比较高效的写法。比如尽量给元素添加class来进行选择、尽量减少选择符之间的嵌套等等。可能这种做法对于刚写CSS的人来说比较难以接受，因为大家可能会想：“人家发明了标签选择器，而我们却不用它，还要写那么多的class，这不是自找麻烦吗！~~”。其实，我刚知道这个东西的时候，也是犹豫不决，但是后来看到这么多牛X的网站都是样搞的（比如上面截图中twitter,youtube,facebook),我也不再纠结什么了。