CSS 선택자의 우선 순위

<pre>
    기본적으로 css 속성은 style태그 또는 css파일에
    작성된 순서(위 -> 아래)대로 해석이 진행되지만

    같은 요소에 여러 css 속성이 설정되는 경우, 우선순위가 적용된다.

    * 알아둬야 할 것!
    1) 동일한 우선 순위로 css 속성이 설정된 경우
        -> 제일 마지막에 작성된 css 속성이 반영된다

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

    1순위 : css속성 : 속성값 !important;
    2순위 : inline-style 속성 (요소에 직접 작성되는 style 속성)
    3순위 : 아이디 선택자(#아이디 속성명)
    4순위 : 클래스 선택자(.class 속성명)
    5순위 : 태그 선택자 (태그명)
</pre>
<!-- 2순위 : inline-style -->
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>