1. + : 인접 형제 선택자는 요소의 바로 다음에 있는 형제 요소를 선택한다.
2. ~ : 형제 선택자는 모든 형제 요소를 선택한다.
<!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>형제 선택자</title>
<style>
.list {height:50px; background:orange;}
.list + li {height:50px; background:skyblue;}
.list ~ li {background:seagreen;}
h2 + ul {display:none;}
h2:hover + ul {display:block;}
</style>
</head>
<body>
<h2>메뉴</h2>
<ul>
<li class="list"><a href="#">메뉴01</a></li>
<li><a href="#">메뉴02</a></li>
<li><a href="#">메뉴03</a></li>
<li><a href="#">메뉴04</a></li>
</ul>
</body>
</html>
결과
