实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器优先级</title>
<style type="text/css">
h1 {
background-color: green;
color: red;
font-size: 10px;
}
h2{
background-color: green;
color: red;
font-size: 10px;
}
h3{
background-color: green;
color: red;
font-size: 10px;
}
.h1-style{
background-color: yellow;
color:blue;
font-size: 15px;
}
#h1{
background-color: red;
color:lightgreen;
font-size: 20px;}
#h2{
background-color: red;
color:lightgreen;
font-size: 20px;
}
#h3{
background-color: red;
color:lightgreen;
font-size: 20px;
}
</style>
</head>
<body>
<h1>这里是标签h1</h1>
<h2>这里是标签h2</h2>
<h3>这里是标签h3</h3>
<h1 id="h1" class="h1-style" style="background-color: #00ff11; color: #fffb21;font-size: larger">
这里是标签h1、id、class、style进行优先级比较,内联style第一</h1>
<h2 id="h2" class="h1-style" >这里是 标签h3、id、class优先级比较 ，id第二</h2>
<h3 class="h1-style">这里是 标签h3、class优先级比较，class第三，标签优先级排名最后</h3>
<p>最后比较结果是style > id > class > 标签h1</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例