CSS选择器及匹配过程

CSS三大特性—— 继承、 优先级和层叠：

继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择器优先级及权重计算

第一优先级：无条件优先的属性，只需要在属性后面使用！important，它会覆盖页面内任何位置定义的元素样式，ie6不支持该属性；
第二优先级：在html中给元素标签加style，即内联样式，该方法会造成css难以管理，所以不推荐使用；
第三优先级：由一个或多个id选择器来定义，例如，#id{margin:0;}会覆盖.classname{margin:3pxl}；
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义，如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义，如div{marigin:6px;}覆盖{margin:10px；}；
第六优先级：通配选择器，如{marigin:6px;}；

4个等级的定义如下：

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

标签选择器：1

span{
      color: red;
      font-size: 14px;
     }

id选择器：100

#content{
      width: 200px;
      background: red;
    }

类选择器：10

.wrapper{
      width: 400px;
      background: blue;
    }

全局选择器：0

*{
    padding: 0;
    margin: 0;
 }

伪类选择器：10

   a:link{color:green;font-size:12px;} // 定义正常链接的样式
   a:hover{color:pink;font-size: 14px;} // 定义鼠标悬浮在链接上时的样式
   a:active{color:blue;font-size: 16px;} // 定义鼠标点击链接时的样式
   a:visited{color:red;font-size: 18px;} // 定义已访问过链接的样式

参考链接：
CSS3选择器介绍及用法总结
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？
css选择器优先级及权重计算