CSS 선택자의 우선순위

기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서대로(위->아래) 해석이 진행되지만 같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.

• 알아둬야 할 것

1. 동일한 우선 순위로 css 속성이 설정된 경우
   -> 제일 마지막에 작성된 css 속성이 반영된다
2. 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다.

1순위 : css속성: 속성값 !important;
2순위 : inline-style 속성 (요소에 직접 작성되는 style속성)
3순위 : 아이디 선택자(#아이디 속성명)
4순위 : 클래스 선택자(.class 속성명)
5순위 : 태그 선택자 (태그명)

html code

<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>

css code

div {
    width: 200px;
    height: 200px;
    background-color: red !important;
}

.cls1 {
    background-color: green;
}

.cls1 {
    background-color: yellow;
}

#test1 {
    height: 100px;
    background-color: black;
    color: white;
}

1순위 background-color: red
2순위 배경색 무시
3순위 글자색 다른 곳에서 설정 없어서 white, 높이 100px
5순위 height 설정 무시