CSS 작업을 하면서 선택자가 겹치면서 적용에 우선 순위를 두어야 할 때가 있다. 퍼블리싱을 막 배운 시기에는 선택자가 중복되는 경우 !important 로 해결하는 경우도 있었는 데 이는 작업을 몇 번 하다보면 알 수 있지만 상당히 좋지 못한 코드다. 사이트를 작업하다보면 선택자가 수도 없이 중복되기 때문에 !important 를 남용하면 좋지 않다. 여러가지 상황에 따라 선택자를 호출하는 경우가 많을 시에는 적용순위를 그에 맞게 나누어야 하기 때문에 !important 속성은 정말 어쩔 수 없이 마지 못해 부여하는 편이다. 올바른 적용 순위를 나누기 위해 알아야 할 !important 를 포함한 css 속성의 적용 우선 순위에 대해 알아보자.

CSS 속성 우선 적용 순위

[1] !important
[2] HTML 에서 작성된 style 속성
[3] ID 선택자
[4] .class 나 :추상클래스 ex):hover :active
[5] tagname (div span 등)
[6] 상위 객체에 의해 상속된 속성