CSS 선택자의 우선 순위

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

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

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

/* 5 순위 : 태그 선택자 */
div {
    width: 200px ;
    height: 200px;
    background-color: red !important; /*1 순위 : important*/
}

/* 4 순위 : 클래스 선택자 */
/* 보통 위에서 아래로 읽지만 순위가 더 높기 때문에 위 아래 상관없이 채택된다 */
.cls1 {
    background-color: green;
}

.cls1 {
    background-color: yellow;
    /* 동일한 우선순위에선 마지막에 
       작성된 설정값이 적용됨 */
}


/* 3 순위 : 아이디 선택자 */
#test1 {
    height:100px;
    background-color: black;
    color:white;
}

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