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

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

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

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

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

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

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

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

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

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

元素后的所有 元素。

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

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

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

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

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