样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#main {
font-size: 80px;
color: blue;
}
.box {
font-size: 40px !important;
color: yellow;
}
div{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<div class="box" id="main" style="font-size:120px;color:gray">哈哈</div>
</body>
</html>
注释：上述代码为了屏蔽样式的层叠性，样式表都是反浏览器渲染的过程书写的，最后还是以标注了!important的标签选择器为为主。
优先级特点:
1、继承的权重为0
2、权重会叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#main #part {
font-size: 380px;
color: blue;
}
#main .son {
font-size: 180px;
color: gray;
}
.father .son {
font-size: 160px;
color: yellow;
}
p.son {
font-size: 120px;
color: green;
}
p {
font-size: 80px;
color: blue;
}
.father {
font-size: 40px;
color: yellow;
}
</style>
</head>
<body>
<div class="father" id="main">
<p class="son" id="part">哈哈</p>
</div>
</body>
</html>
注释：
1、在样式表中子元素如果已经拥有此样式，父元素的样式不会再覆盖子元素的样式。
2、权重的叠加：#main #part> #main .son>.father .son> p.son>p>.father