css选择器的优先级别

时间:2023-10-12 10:08:14
<html><head lang="en">
<meta charset="UTF-8">
<title></title> <!--
css选择器遵循:
.在相同级别:.叠加原则 .就近原则
. id选择器> 类选择器 > 标签选择器
. 范围越小,优先级别越高
-->
<style> div#main{ /**/
color: goldenrod;
} /*id选择器*/
#main{ /**/
color: deeppink;
} /*类选择器*/
.test2{ /**/
color: purple;
} .test1{ /**/
color: yellow;
} /*标签选择器*/
div{ /**/
color: red;
}
div{ /**/
color: green;
}
div{ /**/
color: blue;
font-size: 100px;
} *{ /**/
color: darkgreen !important;
}
</style>
</head>
<body>
<div id="main" class="test1 test2" style="color: red"></div> </body></html>