实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>演示CSS中的选择器优先级</title>
<style>
h3{
color:red;
}
.style01{
color:blue;
} /*class选择器显示蓝色则表明优先级高于标签选择器*/
#style02{
color:yellow;
} /*id选择器显示黄色表明优先级高于class选择器*/
</style>
</head>
<body>
<h3>CSS中标签选择器</h3>
<h3 class="style01">class选择器</h3>
<h3 class="style01" id="style02">id选择器</h3>
<h3 class="style01" id="style02" style="color:pink;">元素中的style属性</h3>
<!--'元素中的style属性'显示粉色表明它的优先级高于id选择器-->
<!--总结：元素中的style > id选择器 > class选择器 > 标签选择器 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例