实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1{background-color: chartreuse;
color: #000;
}
.bgblue{
background-color: blue;
color:crimson;
}
#bgcyan{
background-color: cyan;
color:darkgreen;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 选择器优先级
js修饰>行内或内联样式>id选择器>class选择器>标签选择器
-->
<h1>标签选择器优先文本测试</h1>
<h1 class="bgblue">这行主要比较类选择与标签选择器的优先级</h1>
<h1 class="bgblue" id="bgcyan">这行主要表现id选择器的优先级</h1>
<h1 class="bgblue" id="bgcyan" style="background-color:darkred ;color:blue";>这行主要体现行内样式的优先级</h1>
<h1 class="bgblue" id="js" style="background-color:darkred ;color:blue";>这行主要体现js样式的优先级</h1>
<script>
document.getElementById('js').style.backgroundColor="blue";
document.getElementById('js').style.color="white";
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例