这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
网上有很多资料是关于如何通过 hover 控制子元素的样式。
具体是这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.inter{display: none;}
.app:hover .inter{display: block;}
</style>
</head>
<body>
<div class="app">
top
<div class="inter">inter</div>
</div>
</body>
</html>
按正常思路来讲，这是前端最基础的一个功能，相当于京东、淘宝头部导航栏的一个小功能。这功能可以通过js来写，而且更灵活，但本文主要讲css，所以不做延伸。
本文的重点是，如何通过 hover 控制相邻、平级元素的样式。
看这样一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style></style>
</head>
<body>
<div class="app">
app
</div>
<div class="bottom">bottom</div>
</body>
</html>
思考一下，如何通过app类控制bottom类的样式？
我们可以使用相邻兄弟选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bottom {
display: none;
}
.app:hover+.bottom {
display: block;
}
</style>
</head>
<body>
<div class="app">
app
</div>
<div class="bottom">bottom</div>
</body>
</html>
那什么是相邻兄弟选择器？
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
那如果不是相邻元素，而是平级元素，又是否有办法控制其样式呢？
有办法的，可以使用兄弟选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bottom {
display: none;
}
.app:hover~.bottom {
display: block;
}
</style>
</head>
<body>
<div class="app">
app
</div>
<div class="app_bottom">app_bottom</div>
<div class="bottom">bottom</div>
</body>
</html>
什么是兄弟选择器？
兄弟选择器:~表示某元素后所有同级的指定元素，强调所有的。
那如果存在多个类名相同的元素，我只想对其中一个元素进行操作是否有方法呢？
这种方法也是有的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bottom {
display: none;
}
.app:hover~.bottom.show {
display: block;
}
</style>
</head>
<body>
<div class="app">
app
</div>
<div class="app_bottom">app_bottom</div>
<div class="bottom">bottom</div>
<div class="bottom show">bottom bottom</div>
</body>
</html>
灵活一点，修改兄弟选择器的指向。
