引
在写一个项目的时候，发现自己的css样式总是不起作用，或者抢不到优先级，现在对css的生效顺序以及优先级做一个总结
首先要明白对一个元素可以有多个样式style同时生效（实际上也经常这么做），即一个span标签可以被外层div控制，也可以直接被span控制，一个span标签本身也可以使用多个class。（class=“class1 class2”)
- 在多个内容渲染的情况下，元素最终效果=各个属性融合，如body定义了span的字体，span的父级div定义了子span的样式，他们最终会呈现两个效果的融合显示
- 在同一个class名，被重复写的情况下，元素最终=各个属性融合，并且按照就近原则进行相同属性的优先级比较。并且可以用！important来抢优先级，这可以用在和一些不可变的样式来抢优先级。
本篇考虑的是相同的属性情况下，优先级的问题，即如果我同时在很多地方定义了该span的color，它会怎么显示的问题。
法则1：就近原则
在精确性相同的情况下，根据css距离要改变的元素越近的优先级越高，书上一般都会写内联式>嵌入式>外部式，这是基本常识就不举例子了。但是如果同时内敛/嵌入/外部的有多个该怎么办呢？
假如现在有两个class，spanclass1和spanclass2，并且都在span中引用了
- 一个外部式css文件同时写了这两个样式，则最靠近css文件末端的优先级高
- 两个外部式css文件各写了这两个样式，则后link引入的优先级高
- 嵌入式写的和一个外部式分别写这两个样式，则哪个放后面哪个高
即，越靠近待渲染元素的样式优先级越高
但是可以通过加入!important来改变这一优先级，即如果其中一个样式的color写成color: red !important;那么会优先显示红色
法则2：越精确越优先
id选择器>.class选择器>元素本身
如#top a>.top a >a
但是可以通过加入!important来改变这一优先级，即如果span的color写成color: red !important;那么会优先显示红色
精确性和就近性同时存在
目前的测试结果来看，大部分都是精确的优先级更高，即不管我样式引用写在哪里（内联除外）都是越精确的优先级越高
但是如果写成内联式，那么内联式拥有更高优先级
神奇的一点是，如果内敛式和外部css的important一起出现，important更优先
总结
!important>内敛>精确性>距离
虽然这样总结有交叉的部分，但是好记，也都是经过测试得到的结果