CSS 선택자 우선순위

• CSS 선택자 우선순위
  : 기본적으로 CSS 속성은 style 태그 또는 CSS 파일에 작성된 순서(위 → 아래)대로 해석이 진행되지만,
    같은 요소에 여러 CSS 속성이 설정되는 경우 우선 순위가 적용된다.
  
  ★ 알아둬야 할 것
  1) 동일한 우선 순위로 CSS 속성이 설정된 경우
       → 제일 마지막에 작성된 CSS 속성이  반영됨
  
  2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
      지정되는 CSS 속성이 다르면 모두 반영됨
  
  1순위: CSS 속성 : 속성값 !important;
  2순위: inline-style 속성 (요소에 직접 작성되는 style 속성)
  3순위: 아이디 선택자 (#아이디 속성명)
  4순위: 클래스 선택자 (.클래스 속성명)
  5순위: 태그 선택자 (태그명)

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

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

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

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

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