層級優先級
1、權重比較(以下面標簽中權重最大為准)
如:
ul li .box p input() .box
.hello span #elem{} #elem
2.約分比較(挑選出來以下標簽不一致的，比較權重大小)
ul li .box p input{} li p input
.hello span #elem{} #elem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.相同樣式優先級:設置相同樣式時，后面優先級較高
2.內部樣式與外部樣式：設置相同樣式時，后面優先級較高
3。單一樣式優先級：
style行間 > id > class > tag(標簽) > * >繼承（body）
注：style行間 權重 1000
id 權重100
class 10
tag 1
-->
<style>
p{
color: #0000FF;
}
p{
color: red;
}
h1{
color: #0000FF;
}
#id{
color: #0000FF;
}
.class{
color: #00FFFF;
}
h2{
color: #FF0000;
}
*{
color: brown;
}
body{
color: cadetblue;
}
</style>
</head>
<body>
<p>1.相同樣式優先級</p>
<h1 style="color: red;">2.內部樣式與外部樣式</h1>
<h2 id="id" class="class">3.單一樣式優先級</h2>
<h3 id="id" style="color: #00FFFF;">4.style優先級第一</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- !important 無敵權重，對繼承無效
群組選擇器：標簽+類 > 類
群組選擇器與單一選擇器優先級相同，后寫的優先級高 -->
<style>
p{
color: #FF0000 !important;
}
p{
color: #0000FF;
}
body{
color: aqua !important;
}
h1{
color: #0000FF;
}
h1,.class{
color: #FF0000;
}
div{
color: #0000FF;
}
div,h2{
color: red;
}
</style>
</head>
<body>
<p>無敵權重</p>
<h1 class="class">標簽+類與單類</h1>
<div>111</div>
<h2>群組選擇器</h2>
</body>
</html>
