[CSS] CSS 우선순위 , !important

우선순위 기준

 

◎ css는 일반적으로 실행 순서가 뒤로 갈수록 우선순위가 높다.

◎ clss보다 id가 우선순위가 높다. 

◎ 우선순위가 같다면(예: 양쪽 다 id로 사용) 개수가 많은 쪽이 우선순위가 높게 된다.
◎ !important를 사용하면 우선순위가 가장 높다.

 

 

!important

 

!important는 해당 내용을 최우선으로 적용시키고, 해당 속성이 변경되지 않도록 한다.

"test"라는 class를 사용하여 연습해보았다.

 

html

<div class="test"> 테스트 </div>

 

 

css

.test {
	width: 50px;
	color: black;
	background-color: green !important;
}

.test {
	width: 50px;
	color: white;
	background-color: red;
}

 

결과

 

 

 

순서대로 우선순위가 정해지기 때문에 color 속성은 white로 적용되었지만

background-color는 !important 때문에 red가 아닌 green이 적용되었다.