[CSS] Selector

기본 셀렉터

1. 전체  셀렉터
	- 문서의 모든 요소를 선택
    - * {}
    
2. 태그 셀렉터
	- 같은 태그명을 가진 모든 요소를 선택(복수로도 선택 가능)
    - h1 {}, div {}, section, h1 {}

3. ID 셀렉터
	- #id
    
4. class 셀렉터
	- 같은 class를 가진 모든 요소 선택
    - .center
    
5. attribute 셀렉터
	- 같은 속성을 가진 요소를 선택
    
6. 자식 셀렉터
	- 첫 번째로 입력한 요소의 바로 아래 자식인 요소
    - main > p {}
    - <main>
    	<p>(선택)
        	<span>
            	<p></p>(선택 안 됨)
            </span>
        </p>
        
        <p>(선택)
        	<span>
        		<p></p>(선택 안 됨)
        	</span>
        </p>
    </main>
    
7. 후손 셀렉터
	- 첫 번째로 입력한 요소의 후손까지 선택
    - main p {}
    - <main>
    	<p>(선택)
        	<span>
            	<p></p>(선택)
            </span>
        </p>
        
        <p>(선택)
        	<span>
        		<p></p>(선택)
        	</span>
        </p>
    </main>

8. 형제 셀렉터
	- 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
    - section ~ p {}
    - <main>
    <section></section>
    <p></p>(선택)
    <p></p>(선택)
    <p></p>(선택)
    </main>	
    
9. 인접 형제 셀렉터
	- 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소 선택
    - section + p {}
    - <main>
    <section></section>
    <p></p>(선택)
    <p></p>
    <p></p>
    </main>	

10. 기타 클래스 셀렉터
	- a:link {} : 사용자가 방문하지 않은 <a> 요소 선택
    - a:visited {} : 사용자가 방문한 <a> 요소 선택
    - a:hover {} : 마우스를 요소 위에 올렸을 때 선택
    - a:active {} : 활성화 된(클릭된) 상태일 때 선택
    - a:focus {} : 포커스가 들어와 있을 때 선택