层级优先级
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>