引入样式优先级
引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用， 优先级如下：
外部样式 | 内部样式 <内联样式
外部样式 和 内部样式 ，最后出现的优先级最高，例如：
<!-- 内联样式 --><spanstyle="color:red">Hello</span><styletype="text/css">/* 内部样式 */h3{color:green}</style><!-- 外部样式 style.css --><linkrel="stylesheet"type="text/css"href="style.css"/>
因此，对于一些重置的样式集，比如 normalize.css/reset.css 必须写在所有样式的前面。
PS: 没有外联样式， 参考 。
声明样式优先级
1. 大致的优先级
一般来说满这个规则：
继承不如指定
!important >内联 >ID >Class|属性|伪类 >元素选择器
:link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义
上面是优先级算法反映出的大致结果，在一般的开发中熟记即可。如果需要进一步研究原理，则了解下优先级算法。
2. 优先级算法
选择器的特殊性值分为四个等级，如下：
等级标签内选择符ID选择符Class选择符/属性选择符/伪类选择符元素选择符
示例<span style="color:red">#text{color:red}.text{color:red} [type="text"]{color:red}span{color:red}
标记位x,0,0,00,x,0,00,0,x,00,0,0,x
特点:
每个等级的初始值为0，
每个等级的叠加为选择器出 现的次数相加
不可进位，比如0,99,99,99
依次表示为：0,0,0,0
每个等级计数之间没关联
等级判断从左向右，如果某一位数值相同，则判断下一位数值
如果两个优先级相同，则最后出现的优先级高，!important也适用
通配符选择器的特殊性值为：0,0,0,0
继承样式优先级最低 ，通配符样式优先级高于继承样式
计算示例：
a{color: yellow} /*特殊性值：0,0,0,1*/
div a{color: green} /*特殊性值：0,0,0,2*/
.demo a{color: black} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey} /*特殊性值：0,0,2,0*/
#demo a{color: orange} /*特殊性值：0,1,0,1*/
div#demo a{color: red} /*特殊性值：0,1,0,2*/
生效示例：
<ahref="">第一条应该是黄色</a><!--适用第1行规则--><divclass="demo"><inputtype="text"value="第二条应该是蓝色"/><!--适用第4、5行规则，第4行优先级高--><ahref="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高--></div><divid="demo"><ahref="">第四条应该是红色</a><!--适用第6、7行规则，第7行优先级高--></div>
关于伪类LVHA的解释
a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；
当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。
在组件中的应用
目前的前端开发为了增加开发效率，会对常用组件进行封装，此外，组件还会添加一些必要的结构样式。但是业务的设计文稿中可不一定按照预先写好的默认样式，需要在开发业务时根据组件的DOM结构修改默认样式，此时会出现样式不生效的问题。
例如下面的结构，如果对Title直接增加样式类，则肯定不会生效，因为Title的DOM结构为两层(组件样式定义规定不能使用ID选择器，且类选择器满足最小标记原则)），故样式最多为0,0,2,x。因此，样式多层标记就可提高自定义样式的优先级，例如下方的SCSS写法。
<Pageclass="test"><Headerclass="test__header"><Navbar><Titleclass="test__header--title">Toolbar</Title></Navbar></Header><Content></Content></Page>
.test{.test__header{.test__header--title{height:100px}}}
此外，对于Page组件的样式标记策略推荐使用 金字塔形(树形) ，比如上面的SCSS书写，这样可以保证内部自定义样式不会受到外部干扰，减少不必要的麻烦。
链接：https://www.jianshu.com/p/1c4e639ff7d5
1、标记选择器（如：body,div,p,ul,li）2、id选择器（如：id="name",id="name_txt"）
3、类选择器（如：id="name",id="name_txt"）
4、后代选择器（如：#head.navulli从父集到子孙集的选择器）
5、子元素选择器（如：div>p,带大于号>）
6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
看完了上述内容，那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul<li）
5.后代选择器（lia）
6.伪类选择（a:hover,li:nth-child）
最后，需要注意的是：
!important的优先级是最高的，但出现冲突时则需比较”四位数“
优先级相同时，则采用就近原则，选择最后出现的样式
继承得来的属性，其优先级最低。
