一.属性与通配符对比：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0px;padding:0px;500px;height:200px;}
.wrap{500px;height:500px;margin:200px auto;}
</style>
</head>
<body>
<div class="wrap">
<canvas width="300" height="50"></canvas>
</div>
</body>
</html>
总结：通配符的优先级大于属性优先级
二。通配符与tag：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;background: red;margin-left:200px;} </style> </head> <body> <div class="wrap"> <p></p> </div> </body> </html>
总结：tag优先级大于通配符的优先级
三.class与tag
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;background: red;} .para{background: green;} </style> </head> <body> <div class="wrap"> <p class="para"></p> </div> </body> </html>
总结：class优先级大于tag的优先级
四.id与class
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;background: red;} .para{background: green;} #para{background: yellow;} </style> </head> <body> <div class="wrap"> <p class="para" id="para"></p> </div> </body> </html>
总结：id优先级大于class的优先级
五.id与行内样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;} #para{background: yellow;} </style> </head> <body> <div class="wrap"> <p class="para" id="para" style="background: orange;"></p> </div> </body> </html>
总结：行内样式优先级大于id的优先级
六.行内样式与js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;} </style> <script src="jquery-1.7.2.js"></script> <script> $(function(){ $('.para').css({ background:'red' }) }) </script> </head> <body> <div class="wrap"> <p class="para" id="para" style="background: orange;"></p> </div> </body> </html>
总结：js优先级大于行内样式的优先级
七：js与！important
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} .wrap{width:500px;height:500px;margin:100px auto;} p{width:500px;height:200px;} .para{background: purple !important;} </style> <script src="jquery-1.7.2.js"></script> <script> $(function(){ $('.para').css({ background:'red' }) }) </script> </head> <body> <div class="wrap"> <p class="para"></p> </div> </body> </html>
总结：!important优先级大于js优先级
css优先级权重：
属性选择器权值为 0.01
通配符选择器的权值为 0.1
标签选择器的权值为 1
Class 类选择器的权值为 10
ID 选择器的权值为 100
内联样式表的权值 1000；
js权值大于1000；
！important无限大；
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；