CSS相关
前言：学习前端也有些日子了，越来越发现自己忽视了很多基础的部分。《精通CSS》这本书躺在我的书架上大概有一年多了，我却几乎没有精读过，细想原因大概是我太浮躁，急于求成，却不知基础是最好的垫脚石。现在接触得越来越多，越发现自己的认识有很大的错误。所以想回顾和总结一下样式布局方面的一些感悟。也会在之后补充一些在样式布局方面遇到的坑。
1、浏览器对 CSS 的匹配原理
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如：
div#divBox p span.red { color:red }
浏览器的查找顺序如下：先查找类名为red的span元素，找到后再查找其父辈元素中是否含有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在，则匹配上。
浏览器从右到左查询的好处是尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span.red。
所以为了优化css的加载速度，就要让浏览器在查找 style 匹配的元素的时候尽量进行少的查找。