적용 우선순위
개요
CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요,
CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다.
우선순위는 아래와 같습니다.
- 속성 값 뒤에
!important를 붙인 속성 HTML에서style을 직접 지정한 속성#id로 지정한 속성.클래스,:추상클래스로 지정한 속성태그이름으로 지정한 속성- 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.
!important
우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다.
.normal { color: blue }
.compulsion{ color: black !important }
!important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다.
예제
<html>
<head>
<style>
#my-box .text{ color: black }
.black{ color: red }
.important-black{ color: red !important }
</style>
</head>
<body>
<div id="my-box">
<div class="text">My text 1</div>
<div class="text black">My text 2</div>
<div class="text important-black">My text 3</div>
</div>
</body>
</html>