标签：span 代码 html html标签 log ant class选择器 head type
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代码优先级小结：CSS代码加“!important” > HTML标签style属性里的CSS代码 > id选择器里的CSS代码 > class选择器里的CSS代码。如果id选择器和class选择器对应的代码里都使用了“!important”，谁优先？那就仍然是：id比class优先。其它情况类推。
标签：span 代码 html html标签 log ant class选择器 head type
原文地址：http://www.cnblogs.com/chenziweb/p/7648764.html
