通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。IE 6不支持这个属性；
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0} 会覆盖 .classname{margin:3px}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px} 会覆盖 div{margin:6px}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px} 覆盖 *{margin:10px} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。相同级别的优先级：
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式由用户设定。
最低级的优先权由浏览器默认。
CSS优先级是根据等级的值相加得出选择器的权重来决定的。
!important >行内样式 >ID >类、伪类、属性 >标签名 >继承 >通配符
计算权重方式：
从图上看讲权重分为：
1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。
当权重一样时遵循准则：
1. 选择器越 具体 优先级越 高
2. 在同一个级别的情况下， 最后 指定的规则优先级就越 高 ，也就是我们通常说的就近原则；
权重计算例子：
1. li ->0 0 0 1 权重为 1
2. h1 + *[rel=up] ->0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成，属性选择器为10，因此权重为11
3. ul ol li.red ->0 0 1 3 权重为13
4 li.red.level ->0 0 2 1 权重21
1. !important （width: 100% !important）
2. 行内样式 (style="width:100%")
3. id选择器 (#myIdName)
4. class选择器 (.myClassName)
5. 标签选择器 (div,h1,p)
1. 使用 " >>>" 符号，这种方式主要是用于普通css，方式为：
外层 >>>第三方组件样式： .wrapper >>>.swiper-pagination { color: #eee }
2. 使用 "/deep/" ,这种方式主要用于sass或less，方式为：
外层 /deep/ 第三方组件样式： .wrapper /deep/ .swiper-pagination { color: #eee }
