Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
<!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>Document</title>
<!-- 第三按文件和style顺序从下往上 -->
<link rel="stylesheet" href="css.css">
<style>
*{
font-size:45px;
font-weight:bolder;
}
/* 子元素 只选择一代 */
.div2>div>span{
color:#159454;
}
/* 空格 所有后代 */
.div3>div span{
color:#8b9415;
}
/* 相邻兄弟 */
.div4>div+ul{
color:#849229;
}
/* 所有兄弟 ~ */
.div5>div~ul{
color:#359229;
}
/*
最高级:!important
第一等:内链style=""
第二等:ID选择器 #h3
第三等:类选择器 .h3
第四等:空格选择器 div h3
通配符:子选择器、相邻选择器等
*/
div h3.h3#h3{
color:#123456;
}
div h3.h3{
color:#234567;
}
div h3{
color:#345678;
}
h3{
color:#456789;
}
/* 优先执行!important */
.div{
color:#4a498f !important;
}
</style>
</head>
<body>
<div style="display: flex;" >
<div style="width:50%;" >
<!-- 第二执行style -->
<div class="div" style="color:red;">123</div>
<div class="div2" >
<div>
<span>11</span>
</div>
<div>
<div>
<span>22</span>
</div>
</div>
</div>
<div class="div3" >
<div>
<span>11</span>
</div>
<div>
<div>
<span>22</span>
</div>
</div>
</div>
<div class="div4" >
<div>
<span>11</span>
</div>
<ul>
<li>222</li>
</ul>
<ul>
<li>333</li>
</ul>
</div>
<div class="div5" >
<div>
<span>11</span>
</div>
<ul>
<li>222</li>
</ul>
<ul>
<li>333</li>
</ul>
</div>
</div>
<div style="width:50%;" >
<!-- 权重 -->
<h3 class="h3" id="h3" >123</h3>
</div>
</div>
</body>
</html>