规则一：直接样式的优先级大于继承样式的优先级
HTML元素既有直接定义的样式，如内联样式、选择器样式，也有继承于祖先的样式，如文字颜色color、文字大小font-size。
如果一个元素的直接样式和继承样式发生冲突，那么直接样式会覆盖继承样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
color: red;
}
.child {
color: blue;
}
</style>
</head>
<body>
<!--"哈哈哈"显示红色，"呵呵呵"显示蓝色-->
<p class="father">哈哈哈<span class="child">呵呵呵</span></p>
</body>
</html>
规则二：继承样式冲突时，最近祖先样式优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<!--显示蓝色-->
<p><span>哈哈哈</span></p>
</body>
</html>
规则三：直接样式冲突时，权值高者优先级高
样式的权值取决于样式的选择器，权值定义如下：
| 选择器 | 权值 |
|---|---|
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类选择器 | 10 |
| 伪类选择器 | 10 |
| 属性选择器 | 10 |
| 元素选择器 | 1 |
| 伪元素选择器 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myId{
color: red;
}
.myCls{
color: blue;
}
</style>
</head>
<body>
<!--显示红色-->
<p id="myId" class="myCls">哈哈哈呵呵呵</p>
</body>
</html>
规则四：样式权值相同时，后声明的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls1{
color: red;
}
.cls2{
color: blue;
}
</style>
</head>
<body>
<!--显示蓝色-->
<p class="cls1 cls2">哈哈哈呵呵呵</p>
</body>
</html>
规则五：后代选择器的权值为每项权值之和
举例来说，#nav .left p的权值=100+10+1=111。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myId p{
color: red;
}
#myId .myCls{
color: blue;
}
</style>
</head>
<body>
<!--显示蓝色-->
<div id="myId">
<p class="myCls">哈哈哈呵呵呵</p>
</div>
</body>
</html>
规则六：!important的样式优先级最高
无论是什么样式，只要标注!important，就拥有最高优先级。当同时标注!important时，则正常计算权值，权值高者优先级高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myId{
color: red;
}
#myId2{
color: blue !important;
}
p{
color: orange !important;
}
</style>
</head>
<body>
<!--显示橘黄色-->
<p id="myId">哈哈哈呵呵呵</p>
<!--显示蓝色-->
<p id="myId2">呵呵呵哈哈哈</p>
</body>
</html>