CSS是修饰页面效果的代码，具有层叠性特点，相同层级的选择器，后面的代码会覆盖前面的代码。
选择器的优先级，ID选择器>类名选择器>标签选择器
对于不同层级的标签，优先级高的选择器会覆盖优先级低的选择器。分别定义标签选择器（优先级1、蓝色）、类名选择器（优先级10、橙色）和ID选择器（优先级100、红色），最后优先级最高的ID选择器会覆盖前面的代码，显示红色。
<body>
<style>
/* （层级1） */
/* 标签选择器 */
div {
width: 100px;
height: 100px;
background-color: blue;
}
/* （层级10） */
/* 类名选择器 */
.item {
background-color: orange;
}
/* （层级100） */
/* ID选择器选择器 */
#item {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="item" id="item"></div>
</body>效果如下：
对于相同层级的选择器，后面的代码会覆盖前面的代码。假如定义三个相同层级的选择器，分别设置红色、橘色和绿色背景，最终显示的颜色是绿色。
<body>
<style>
/* （层级10） */
/* 标签选择器 */
.item {
width: 100px;
height: 100px;
background-color: red;
}
/* （层级10） */
.item {
background-color: orange;
}
/* （层级10） */
.item {
background-color: green;
}
</style>
<div class="item"></div>
</body>最终效果：
