选择器和优先级

• !important
• 内联样式（如 style）
• ID 选择器（如 #id{}）
• 类选择器（如 .class{}） = 属性选择器（如 a[href="#"]{}） = 伪类选择器（如 :hover{}）
• 标签选择器（如 span{}） = 伪元素选择器（如 ::before{}）
• 通配选择器（如 *{}）

复杂选择器关系

1. 如果存在内联样式，那么 A = 1，否则 A = 0；
2. B 的值等于 ID选择器（#id） 出现的次数；
3. C 的值等于 类选择器（.class） 和 属性选择器（a[href="#"]） 和 伪类（:first-child） 出现的总数；
4. D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。（0,0,0,0）从左至右比较，如果是样式优先级相等，取后面出现的样式。

:before 和 ::before 的区别

都表示伪元素before，:before是css3之前的用法，::before是css3后的用法
在css3中，单引号用于伪类；双引号用于伪元素