CSS 선택자 우선순위

선택자 우선순위

순위	선언방식	설명	예시
1	!important	우선순위 최상위 명령어. 속성값 바로 뒤에 넣는다.	p { color: red !important; }
2	inline style	html 문서에서 tag 내에 style을 정의한 것	<p style="color: red">
3	id Selector	tag 내에 id를 정의한 후, #id 으로 선택	<p id="title">제목</p> #title { color: red; }
4	class Selector	tag 내에 class를 정의한 후, .class 으로 선택	<p class="subtitle">부제목</p> .subtitle { color: red; }
5	tag Selector	tag 요소를 선택자로 사용	p { color: red; }
6	universal Selector	asterisk(*)로 요소 전체를 선택	* { color: red; }

 

 

!import	우선순위 1위
id 선택자 vs class 선택자	id 선택자 우선
class 선택자 vs 요소 선택자	class 선택자 우선
요소 선택자 vs 전체 선택자	요소 선택자 우선
class 선택자 vs 특정 요소의 class 선택자	특정 태그의 class 우선 ex) .title vs h1.title : h1.title가 더 구체적임
같은 class 선택자에 대한 css	순서상 나중이 우선
같은 요소 선택자에 대한 css	순서상 나중이 우선