!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 }
正常情况下是就近原则，css从上直下，如果相同会采用最后的css，如果是css3就要看情况了。比如：如果设置了【：first-child或者：last-child，：nth-child()】等这种选择器，会采用选择器的css；如果设置了【！important】会采用有这个的css，就算是写在div里面的也没有这个级别高（但不是万能的，有的可以设置有的不行，列出来太多了，记着也麻烦，最简单的记忆方式就是写完在浏览器中F12，如果划横线就是不好使）
width：10px ！important；意思是设置成最高级别，不管先后都会采用这个css，如果有两个这种代码会采用最后一个。
以下是优先级设置顺序：
1、width：10px；
2、width：10px ！important；
3、：first-child{width：10px；}
4、：first-child{width：10px ！important；}
优先级顺序为4>2>3>1，如果是同级别情况下会就近选择，就是选择最后一个
