CSS 선택자 우선순위

김민석·2024년 9월 19일

선택자 우선순위

어떤 선언의 CSS 속성을 우선적으로 적용할 것인지 결정하는 방법.
우선순위 기준: 1.점수가 높은 선언 2.점수가 같다면 마지막에 작성된 선언

선택자 점수

!important : 가장 높은 우선순위 (무한대)

	div{
    	color:red !important;
    }

인라인 선언 방식 :1000점

	<div>
			<p style="color: red;">Contents</p>
	</div>

id : 100점

	#container
    {
    	color:red;
    }

class 10점

	.container
    {
    	color:green;
    }

태그 : 1점

	p{
    	color:white;
    }

전체(*):0점

	*{
    	color:darkblue;
    }

인라인 선언 방식은 해당 코드를 직접 찾아서 수정하는 과정이 복잡하고 불편하여 사용을 줄여야 하고 !important를 남용하게 되면 다른 방식으로 수정할 때 !important 떄문에 안되는 경우가 생겨 왠만하면 사용하지 않는것이 좋다.

profile
나만의 기록장

0개의 댓글