CSS学习笔记——选择器优先级
概念
当一个元素被多个CSS选择器覆盖到的时候，该元素应该应用哪种样式。搞清楚这个问题的关键在于选择器优先级。浏览器根据优先级判断元素与哪个样式最为相关。
优先级的计算
选择器优先级一共分为4级，由高到低的顺序：
- 行内样式，直接在标签里面加入，
<div style="style="font-weight:bold"></div> - ID(#example)选择器
- 类(.example)、伪类(:hover)、属性([type="radio"])选择器
- 元素(h1)、伪元素(:before)选择器
除了以上列出来的选择器之外，通配符(*)、组合符号(+, >, ~, ' ')、否定伪类(:not())对优先级的计算不产生影响
在W3C有关优先级的描述中，给出了下面的例子。abcd的优先级依次递减，优先级的比较只能在同级之间展开，再多低级别的叠加也不会超过高级别。
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
