!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>
div>span{
color: red;
}
div .s2{
background-color: green;
}
.s2+span{
font-size: 30px;
}
.s2~span{
color: orange;
}
div+p::first-letter{
color: red;
}
</style>
</head>
<body>
<!-- 需求一:通过div超市,找到span衣服,给span衣服设置字体颜色,红色 -->
<!-- 需求二:通过div超市,找到span洗发水,给洗发水设置背景色绿色 -->
<!-- 需求三:通过span洗发水,找到纸巾,给纸巾字体放大到30px -->
<!-- 需求四:通过span洗发水,找到后面所有的兄弟,给他们设置字体颜色橘色-->
<!-- 需求五:段落的文字第一个字一直是红色 -->
<div>
超市
<p>
日用品区
<span>牙膏</span>
<span class="s2">洗发水</span>
<span>纸巾 </span>
<span>沐浴露</span>
<span>护发素</span>
</p>
<p>生鲜区</p>
<span class="s1">衣服</span>
</div>
<p>
dolor, sit amet consectetur adipisicing elit. Laboriosam enim recusandae cumque ad totam aspernatur magni aut iste placeat odio? Vel error ut natus voluptas blanditiis, iusto optio repellendus
sint.
</p>
</body>
</html>