1、覆盖
使用了相同选择器的CSS代码，如果有相同的CSS属性，后定义的属性覆盖先定义的属性，如：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">div{color:#ff0000;font-size:14px;}div{font-size:12px;}//以上两行等价于：div{color:#ff0000;font-size:12px;}</style></head><body></body></html>2、越详细或精确的标签定位（选择器），优先级越高
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">div span i{color:#ff0000;/*在层级的表述上，本选择器比下面的选择器更详细、精确，所以优先级高*/}div i{color:#0000ff;font-weight:bold;}</style></head><body><div><span><i>本内容的颜色将是“#ff0000”，并且文字加粗<i></span></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">div {color:#ff0000;/*泛*/}.c1{color:#0000ff;font-weight:bold;/*明确指定类名*/}</style></head><body><div class="c1">本内容的颜色将是“#ff0000”，并且文字加粗</div></body></html>3、id的定义比class的定义优先
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">#ok2{color:#00ff00; }.ok1{color:#ff0000;font-weight:bold;}</style></head><body><div id="ok2" class="ok1">本内容的颜色将是“#00ff00”，并且文字加粗</div></body></html>4、HTML标签的class属性如果有多个值，按style标签里的代码顺序，后定义的CSS代码优先
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">.ok1 {color:#00ff00;font-weight:bold;}.ok2{color:#ff0000;/*后定义，会覆盖先定义，所以优先*/}</style></head><body><div class="ok2 ok1">本内容的颜色将是“#ff0000”，并且文字加粗。与class属性里类名称的顺序无关。</div></body></html>5、HTML标签的style属性比id属性优先
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">.ok1{color:#ff0000;font-weight:bold;}#ok2{color:#00ff00; }</style></head><body><div style="color:#0000ff;" class="ok1" id="ok2">本内容的颜色将是“#0000ff”，并且文字加粗</div></body></html>6、CSS属性的值以“!important”标识结尾，它将是最高的优先级
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS优先级</title><style type="text/css">.ok1{color:#ff0000!important; }#ok2{color:#00ff00;font-weight:bold;}</style></head><body><div class="ok1" id="ok2" style="color:#0000ff;">本内容的颜色将是“#ff0000”，并且文字加粗</div></body></html>【原创干货】CSS代码的优先级
原文地址：http://www.cnblogs.com/chenziweb/p/7648764.html