一、CSS是如何匹配样式的
样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
二、CSS选择器性能排行（从高到低）
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover,li:nth-child）
数据来源于Google 资深web开发工程师Steve Souders
三、书写规则注意事项
1.不要在ID选择器使用的同时再使用标签或类选择器了，例如 "div#content" 或者 "#content.text"。
原因：样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。，而在html中ID是唯一的，如果真的是用了 "div#content"，浏览器通过ID定位到了具体的元素，然后发现左侧还是标签选择器，那么就会继续匹配，继续查找元素，这样无疑损耗了浏览器的性能，影响了渲染时间。
2.不要在类选择器时用标签选择器,例如div .text
原因：从css的效率来看，类选择器（class）是比标签选择器要好，这样的写法只会增加了查找的难度，如果真的是根据标签来区分样式的话，考虑写不同的class，例如.container .text
3.如果明确dom结构，能使用子选择器就不要使用后代选择器，例如div a
如果你的写法是这样 "div a"，而实际上div 跟 a 是父子关系，如果合适更建议是这么用 "div>a"，这样效率高一些，但是不是最好的方案，下面这一点的方案会更好一些。
4.使用类选择器替代后代选择器和子选择器
后代选择器在CSS中是最昂贵的选择器，尤其是把它和标签或通配符放在一起！ 毫无疑问，我们要想其他的方式来替换这种书写方式，那么可以考虑这样的写法：div对应的为".div-text" a对应的为".div-text-a"，从命名上来关联两者，在查看的时候逻辑也会清晰很多。
5.尽量使用继承来避免写重复的样式
#text{
}
#text>.span:{
font-size:24px;
}
#text>.a{
font-size:24px;
}
这种写法应改为
#text{
font-size:24px;
}
6.能不使用通配符选择器（*）和属性选择器就尽量不要用