規則一：直接樣式的優先級大於繼承樣式的優先級
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>