<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器权重</title>
<style>
/* 1、不同选择器：id(100) > class(10) > element(1) */
h1 {
color: black;
}
.title1 {
color: red;
}
#title1 {
color: yellow;
}
/* 2、相同选择器：后面的会覆盖掉前面的 */
.title2 {
color: antiquewhite;
}
.title3 {
color: black;
}
/* 3、层级选择器：按权重累加计算 */
.box #box_title {
color: wheat;
/* 权重：10+100 */
}
#box_title {
color: red !important;
/* 权重：100+最大 */
}
</style>
</head>
<body>
<!-- 1、不同选择器 -->
<h1 class="title1" id="title1">Hello world!</h1>
<!-- 2、相同选择器 -->
<h1 class="title2 title3">Kasmne</h1>
<!-- 3、层级选择器 -->
<div class="box">
<h1 class="title4 title5" id="box_title">jasmine</h1>
</div>
</body>
</html>
