css 우선순위

<div class="rank">css</div>

<style>

.rank {

background-color: red;

}

div {

background-color: blue;

}

</style>

위에 예시처럼 같은 html요소를 가리키고 명령이 서로 충돌되는 경우, 브라우저는 어느 한 쪽의 편을 들어 명령을 적용해야겠죠?

이럴때 시시비비를 가리는 것이 css우선순위다.

구체적인 계산법이 존재하지만 실제로 그걸 일일이 계산까지 해가며 하는 것은 의미가 없다.

구체적으로 선택자를 지정할수록 우선순위가 높다고 생각하면 되며, 우선순위간의 위계는 아래와 같다.

우선순위의 위계

1. !important (급할때 유용하나 위계질서를 깨버리기 때문에 가급적 사용을 안해야 한다.)

2. inline css (html 태그에 style속성으로 css 적용하는 것)

3. id selector

4. class selector

5. type selector (태그명으로 선택자를 사용)