[CSS]우선순위와 캐스캐이드

개요

css를 적용할 때 우선순위로 적용되는 경우에 대해 알아보자

 

css우선순위는 0,0,0,0을 기억하면 된다.

• 인라인 스타일로 작성 되었는가?
• id 선택자를 기반으로 스타일시트가 작성 되었나?
• 클래스, 가상클래스, 속성선택자 기반으로 스타일시트가 작성되었나?
• 요소를 기반으로 스타일시트가 작성 되었나?

💡 왼쪽의 수가 높을수록 우선순위가 높다. 1,0,0,0 은 0,1000000000,0,0 보다도 우선순위가 높다. 올림픽 메달과 개념이 비슷하다.

💡 숫자는 갯수를 의미하며 여러개가 있으면 해당 갯수만큼 숫자를 붙여준다

인라인 스타일로 작성된 경우

<p style={{color: '#fff'}}> </p>

• 1, 0, 0 ,0 이 된다

id선택자로 스타일시트를 작성한 경우

<p id='idSelector'> </p>

#idSelector { }

• 두번 째 수를 갯수만큼 올려준다

class선택자로 스타일시트를 작성한 경우

<p class='classSelector' type='button'> </p>

.classSelector{ } // 0,0,1,0

[type=button] { } // 0,0,1,0
.classSelector:hover {  } // 0,0,2,0

• 세번 째 수를 갯수만큼 올려준다

HTML Tag로 스타일시트를 작성한 경우

<p> </p>

p {  } // 0,0,0,1

• 네번 째 수를 갯수만큼 올려준다

!important

가장중요하며 important 사용 시 인라인스타일 보다 더 높은 우선순위를 갖음

p {
	color: #fff !important
}

!important > x,x,x,x(우선순위)

전체선택자 (*)

위의 우선순위를 올려주는 요소가 없어 0,0,0,0이 되며 우선순위가 있는 것들 중 가장 낮은 순위로 적용된다.

상속

우선순위가 존재하지 않는다.

• 선택자 > 상속
• 0,0,0,0도 우선순위가 존재하는 것으로 우선순위가 없는 경우보다 우선시 된다

ul {
	color: #fff;
}

<ul> 
	<li></li>
	<li></li>
	<li></li>
</ul>

// li 요소에도 color가 적용되는 현상

우선순위가 완전히 똑같은 경우

더 나중에 작성된 코드가 덮어씌워 적용된다고 생각하며 된다.

출처에 의한 정렬

사용자 스타일 시트

저시력자나 색맹같은 특별한 조건을 부여하여 스타일이 사용자에 맞게 생성되는 경우

1. 사용자 스타일시트에서 !important적용
2. 제작자 스타일시트에서 !important적용
3. 제작자 스타일시트 나머지 적용
4. 사용자 스타일시트 나머지 적용

일반적으로는 제작자 스타일시트가 우선적이지만 !important의 경우 사용자 스타일시트가 더 우선시 됌

순서에 의한 정렬

a:link
a:visited
a:focus
a:hover
a:active

• 위의 순서를 지켜 작성해야 모든스타일이 제작자가 원하는데로 적용할 수 있다.
• 모바일과 데스크톱에서도 잘 적용되는지 한번 실험해보자

출처: css완벽가이드