css样式优先级及其权重的计算
一、引入样式的类型
1. 行内样式：
在元素的标签内用style=" "的方式引入样式，不过现在都是内容、样式、行为的分离，这种方式容易造成代码的混乱，不利于代码的维护。
2. 内嵌样式：
在html页面中用<style type="text/css"></style>style标签来内嵌css样式，其缺点和行内样式差不多。
3. 外部样式：
这里的外部样式分两种，一种是@import导入式，另一种是<link rel="stylesheet" href="xx.css" type="text/css" />标签链接式。
@import：
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，使用的语法如下：
1 | <style type="text/css"> |
link：
也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，使用语法如下：
1 | <link href="style.css" rel="stylesheet" type="text/css"/> |
比较两者的区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
二、css选择器的类型
1. 基本选择器：
包括三种基本选择器：通配符*选择器、标签选择器、class类名选择器、ID选择器。
2. 层级选择器：
包括后代选择器div p{ }、子元素选择器ul>li{ }、相邻兄弟选择器div+p{ }（所有与div同级并且相邻的第一个p元素）、通用兄弟选择器div~p{ }（与div同级并且相邻的所有p元素）。
3. 群组选择器：
使用不同的选择器，用逗号,分隔，如：.red,p,li{ }。
4. 属性选择器：
使用[]作为属性的筛选标志，如：[target=_blank]选择含有target属性并且值为_blank的所有元素。
5. 伪类选择器（伪对象选择器）：
伪类（:）一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性； 伪元素（::）表示DOM外部的某种文档结构。
在css3中规范推荐伪对象选择器使用（::），这样就更好的区别伪类和伪对象。
伪对象选择器：
| E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式 |
|---|---|---|
| E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式 |
| E:before/E::before | CSS2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after/E::after | CSS2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E::placeholder | CSS3 | 设置对象文字占位符的样式 |
| E::selection | CSS3 | 设置对象被选择时的颜色 |
三、优先级及权重
1. 优先级的分类：
第一优先级：无条件优先的属性只需要在属性后面使用！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;}
2. 优先级的权重计算规则：
我们把每个等级的选择器赋予相应的值，在选择器中符合哪个等级就把相应的值相加就是该选择器的权重值。
第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
-
div.test1 .span var 优先级 1+10 +10 +1
-
span#xxx .songs li 优先级1+100 + 10 + 1
-
#xxx li 优先级 100 +1
