점수가 높은 순서대로 작성
1.!important
→ 무한대(가장 높은 점수)
2. style 속성을 html에 인라인 선언 → 1000점
3.id
선택자 # → 100점
4.class
선택자 . → 10점
5. 태그 선택자 → 1점
6.*
전체 선택자 → 0점
점수가 높으면 선언이 우선한다.
만약 점수가 같다면, 가장 마지막에 작성된 코드가 우선한다.
!important
의 남용을 지양하자. 나중에 더 높은 우선순위를 가져야 하는 요소에 스타일을 적용할 때 !important
를 적용한 이전의 요소들을 모두 찾아서 변경해야 하기 때문이다.
html에 직접 style을 태그 안에 적용하면 의도하지 않게 해당 스타일을 우선시 하기 때문에 추후 같은 태그에 다른 스타일을 적용할 때 한 번 더 확인해야 하기 때문에 유지 보수가 어렵다.
부모 요소로부터 받은 상속된 속성은 점수로 계산하지 않는다.
예제
<body> <div class="color">안녕하세요</div> <style> .color { color: red; } .color { color: green; } </style> </body>
과연 위의 '안녕하세요'는 무슨 색상을 가질까?'
왜?
.color
태그 두개 모두 class를 선택자로 사용했기 때문에 10점을 가진다.
같은 점수를 가질 때는 마지막에 작성된 코드가 우선하기 때문에 green 이 선택된다.