HTML中四种关系选择器
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
接下来谈谈各个关系之间的作用吧
1、子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
.sup > span{
color: red;
}
2、后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
p1 .p2 {
color: blue;
}
3、选择下一个兄弟选择器
作用：通过指定的元素找到下一个兄弟元素
语法：兄+弟{}
.p1 + .p2 {
color: blue;
}
4.选择下面所有的兄弟(前面的不选)
语法：兄～弟{}
.p1 ~ p{
font-size: 40px;
}
<!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>
.sup > span{
color: red;
}
/* 需求二 */
.sup .s2{
background-color: green;
}
/* 需求三 */
.s2 + span{
font-size: 30px;
}
/* 需求四 */
.s2~ span{
color: orange;
}
/* 需求五 */
p::first-letter{
color: red;
}
</style>
</head>
<body>
<div class="sup">
超市
<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>
