实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示css中选择起优先级案例</title>
<!--第二步：在外部样式表中定义h1的样式，查看选择器的优先级-->
<style>
/*从标签开始定义*/
h1{
background-color: crimson;
color: aqua;
}
/*开始测试class*/
.bg{
background-color: antiquewhite;
}
/*测试id选择器*/
#bg{
background-color: black;
}
/*测试效果可以看出 id>class>标签*/
</style>
</head>
<body>
<hr>
<!--第一步给h1标签中添加属性-->
<h1 id="bg" class="bg" title="优先级" style="background-color: cornflowerblue">演示css中选择器的优先级</h1>
<!--元素具备的4个属性 id ***号； class 性别； title 姓名 style 个人简介-->
<!--元素中 style 加入，外部样式表失效-->
<!--测试元素优先级得出结论 style>id>class>标签-->
<hr>
<!--引入js控制元素查看效果-->
<script>
document.getElementById('bg').style.backgroundColor='red';
</script>
<!--js优先级最高，拥有控制的权限-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
