[CSS] 06_선택자 우선순위

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

알아둬야 할 것!

1) 동일한 우선 순위로 css 속성이 설정된 경우
-> 제일 마짐가에 작성된 css 속성이 반영된다

2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css속성이 다르면 모두 반영된다

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

[HTML]

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

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

/* 4순위 : 클래스 선택자 */
.cls1 {
    background-color: green;
    /* 배경색이 green으로 변경되지만,
    겹치지 않는 width/height는 그대로 반영
    */
}

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

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