浅谈CSS选择器，及CSS选择器优先级

在看CSS选择器优先级顺序前，我们先来简单说说CSS基本选择器有哪些？

1. 通用选择器（如：*，即选择所有元素）
2. 标签选择器（如：body,div,p,ul,li）
3. id选择器（如：id="name",id="name_txt"）
4. 类选择器（如：id="name",id="name_txt"）
5. 后代选择器（如：#head .nav ul li 从父集到子孙集的选择器）
6. 子元素选择器（如：div>p ,带大于号>）
7. 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
8. 伪元素选择器

标签、id、类选择器通常很好理解。标签选择器的写法就是直接写一个标签如body{}；id选择器的写法是#id名称{}，类选择器的写法是.class名称{}。

下面我们来说说稍微复杂一点的选择器

1. 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层子线后代关系，可以有多个空格加以分开。

如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。

2. 子元素选择器

请注意这个选择器与后代选择器的区别，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

3. 伪类选择器

即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover。如

4. 伪元素选择器

就像伪类一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。 下例中的 ::first-line伪元素改变段落第一行的文字样式。

/* The first line of every 
 element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注意：与伪元素比较，pseudo-classes 能够用来改变基于状态的元素样式。

5. 组合选择器

紧邻兄弟选择器
'+' 操作符选择相邻元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。
语法: A + B
例子: ul + li 会匹配任何

元素 后紧邻的
• 元素。

  一般兄弟选择器
  '~' 操作符选择兄弟元素，也就是说，第二个节点在第一个节点后面的任意位置，并且这俩节点的父节点相同。
  语法: A ~ B
  例子: p ~ span 将会匹配同一父元素下，

  元素后的所有 元素。

  子选择器
  '>’
  语法: A > B
  例子: ul > li 将会匹配直接嵌套在

  元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。") 元素内的所有
  • 元素 (或者 HTML 列表条目元素) 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(
    )，一个无顺序的列表(
    )，或者一个菜单 ()。在菜单或者无顺序的列表里，列表条目通常用点排列显示。在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母。") 元素。

    后代选择器
    ' ' (空格) 操作符将选择第一个元素的子代节点。
    语法: A B
    例子: div span 将匹配

    元素 内所有的 元素。

    说完了CSS选择器，那么就要说一说选择器它们的优先级了

    当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

    不同级别

    1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    2. 作为style属性写在元素内的样式
    3. id选择器
    4. 类选择器
    5. 标签选择器
    6. 通配符选择器
    7. 浏览器自定义或继承

    总结排序：!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

    算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

    需注意的：

    1. !important的优先级是最高的，但出现冲突时则需比较”四位数“;
    2. 优先级相同时，则采用就近原则，选择最后出现的样式;
    3. 继承得来的属性，其优先级最低;

    !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
    *css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

    参考：
    CSS选择器优先级总结
    为什么CSS选择器是从右往左解析