在我们为HTML的元素设计样式时，有时会在一个元素中使用到多个class，又或者是这个元素符合多个定义的class，这时候我们就要注意这些class之间的优先级了。
class的定义方式有以下几种：
一、 .aclass的优先级与在元素中的指定顺序无关，和class的定义顺序有关，最后定义的优先级最高。
HTML：
ab baCSS：
.a{ color:red;}.b{ color:green;}此时页面显示结果为：
可以看到现在都是使用了 .b 的样式，然后把css中 a 和 b 的位置调换
.b{ color:green;}.a{ color:red;}此时页面显示结果为：
二. 、 .a.b（没有空格）
这种写法是当 class 中同时出现 a和b时才起作用（class="a b"）
HTML:
a b c ab abcCSS:
.a.b.c{ color:orange;}.a.b{ color:brown;}.a{ color:red;}.b{ color:green;}.c{ color:blue;}此时页面显示结果为：
这种写法的优先级是按class 的个数来决定的，数量越多，优先级越高。
三、 .a .b（有空格）这种写法是选择 a 的所有 b 子节点
HTML：
a a b a b b a b b b a b b a a b b a bcCSS：
.a .b{ color:orange;}.a{ color:red;}.b{ color:green;}.c{ color:blue;}页面显示结果为：
a 的所有 b 子节点都显示为绿色。
四、 .a>.b
与 .a .b（有空格）类似，不过只对子一代的 b 生效
HTML：同上
CSS：
.a>.b{ color:orange;}.a{ color:red;}.b{ color:green;}.c{ color:blue;}页面的显示结果为：
可以看到只对子一代 a b 和 a b b a bc生效
五、 .a~.ba~b 是指出现在a后的同一层次的所有的b
HTML:
a b ab a a bCSS:
.a~.b{ color:orange;}.a{ color:red;}.b{ color:green;}.c{ color:blue;}页面的显示结果为：
所有出现在 a 后的同一层次的 b 都为橘色
六、 .a+.b.a+.b 与.a~.b类似，是指刚好出现在a后的同一层次的第一个b
HTML：（同上）
CSS：
.a+.b{ color:orange;}.a{ color:red;}.b{ color:green;}.c{ color:blue;}页面的显示结果为：
出现在 a 后的第二个 ab 没有变成橘色
七、 混合出现当上述的定义方式同时出现时，先按class的数量排优先级，数量越多，优先级越高。数量相同时，按定义的先后顺序排优先级，最后定义的优先级最高。
HTML：
a a a a abCSS：
.a+.b{ color:yellow;}.a~.b{ color:blue;}.a .b{ color:brown;}.a.b{ color:orange;} .a{ color:red;}.b{ color:green;}页面显示结果为：
a ab 同时满足上面的所有class，最终的颜色为 .a.b 定义的 orange，在变换上面四个class的顺序后，发现总是最后定义的class生效。结果就不一一放出了。
八、 !important
class中有 !important 为后缀的样式的优先级无视以上规则。
HTML:（同上）
CSS：（.b{}中加了!important）
.a.b{ color:orange;} .a+.b{ color:yellow;}.a~.b{ color:blue;}.a .b{ color:brown;}.a{ color:red;}.b{ color:green !important;}页面的显示结果为：