3-15作业审批
来源:3-15 编程练习
web前端高级开发工程师
2021-08-03 20:46:28
<!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>
.box1 li:first-child{color: red;}
.box2 li:first-child{color: red;}
.box3 li:first-child{color: red;}
.box1 li:nth-child(2){color: green;}
.box2 li:nth-child(2){color: green;}
.box3 li:nth-child(2){color: green;}
.box1 li:last-child{color: blue;}
.box2 li:last-child{color: blue;}
.box3 li:last-child{color: blue;}
</style>
</head>
<body>
<ul>
<li class="box1">
家用电器
<ol>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ol>
</li>
</ul>
<ul>
<li class="box2">
清洁用品
<ol>
<li>洗衣液</li>
<li>消毒剂</li>
<li>洗厕液</li>
</ol>
</li>
</ul>
<ul>
<li class="box3">
妇婴用品
<ol>
<li>奶粉</li>
<li>纸尿裤</li>
<li>奶瓶</li>
</ol>
</li>
</ul>
</body>
</html>
相关截图:
1回答
同学你好,效果实现是对的,建议优化:
将ol作为父选择器,统一设置样式,简化代码书写,示例:
祝学习愉快~