[CSS] 동위 선택자

선택자 A + 선택자 B : 선택자 바로 뒤에 위치하는 선택자 B 를 선택

선택자 A ~ 선택자 B : 선택자 A 뒤에 위치하는 선택자 B 를 선택

<h1>Header 1</h1>
<h2>Header 2</h2>
<h2>Header 3</h2>
<h2>Header 4</h2>

일때 

h1 + h2 { color : red }

로 하면 Header 1과 Header 2만 텍스트 색이 빨간색으로 변한다.

h1 ~ h2 { color : red }

로 하면 Header 1과 Header 2,3,4 모두 텍스트 색이 빨간색으로 변한다.

즉, h1 바로 뒤에있는 h2 단 하나만 선택하고 싶을때 +

h1 뒤에있는 모든 h2 를 선택하고 싶을때 ~ 를 사용한다