在看CSS选择器优先级顺序前，我们先来简单说说CSS基本选择器有哪些？
- 通用选择器（如：*，即选择所有元素）
- 标签选择器（如：body,div,p,ul,li）
- id选择器（如：id="name",id="name_txt"）
- 类选择器（如：id="name",id="name_txt"）
- 后代选择器（如：#head .nav ul li 从父集到子孙集的选择器）
- 子元素选择器（如：div>p ,带大于号>）
- 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
- 伪元素选择器
标签、id、类选择器通常很好理解。标签选择器的写法就是直接写一个标签如body{}；id选择器的写法是#id名称{}，类选择器的写法是.class名称{}。
下面我们来说说稍微复杂一点的选择器
- 后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层子线后代关系，可以有多个空格加以分开。
如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。
- 子元素选择器
请注意这个选择器与后代选择器的区别，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
- 伪类选择器
即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover。如
- 伪元素选择器
就像伪类一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。 下例中的 ::first-line伪元素改变段落第一行的文字样式。
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
注意：与伪元素比较，pseudo-classes 能够用来改变基于状态的元素样式。
- 组合选择器
紧邻兄弟选择器
'+' 操作符选择相邻元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。
语法: A + B
例子: ul + li 会匹配任何 <ul>元素 后紧邻的 <li>元素。
一般兄弟选择器
'~' 操作符选择兄弟元素，也就是说，第二个节点在第一个节点后面的任意位置，并且这俩节点的父节点相同。
语法: A ~ B
例子: p ~ span 将会匹配同一父元素下，<p>元素后的所有 <span>元素。
子选择器
'>’
语法: A > B
例子: ul > li 将会匹配直接嵌套在 <ul>元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。") 元素内的所有 <li>元素 (或者 HTML 列表条目元素) 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)，或者一个菜单 (<menu>)。在菜单或者无顺序的列表里，列表条目通常用点排列显示。在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母。") 元素。
后代选择器
' ' (空格) 操作符将选择第一个元素的子代节点。
语法: A B
例子: div span 将匹配 <div>元素 内所有的 <span>元素。
说完了CSS选择器，那么就要说一说选择器它们的优先级了
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
不同级别
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别
同一级别中后写的会覆盖先写的样式
上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合
CSS优先级：是由四个级别和各级别的出现次数决定的。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
需注意的：
- !important的优先级是最高的，但出现冲突时则需比较”四位数“;
- 优先级相同时，则采用就近原则，选择最后出现的样式;
- 继承得来的属性，其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
