03_선택자 우선순위

선택자 우선순위

기본적으로 css는 위에서부터 아래로 적용됨.
이때, 동일한 요소를 다양한 선택자로 css가 부여된 경우, 우선순위에 따라 적용됨.
순서는 다음과 같이
!important > 인라인스타일방식 > id선택자 > 클래스선택자 > 태그선택자
단, 겹치지 않는 스타일일 경우, 우선순위에 상관없이 반영됨.

<style>

h1{
   background-color: pink;
   color: yellow;
}

h1{
  color:red;
  /* 겹치는 스타일인 경우, 가장 마지막의 스타일이 적용됨.(우선순위가 같을경우) */
}

#id1{
    background-color: pink !important; 
    /* 여러개의 important중 우선순위가 높은 id선택자가 적용됨 */
}

.class1{
        background-color: yellowgreen !important;
        /* 클래스선택자보다 id선택자가 우선되기 때문에, class의 스타일은 부여되지 않음. */
        color:white;
        /* 단, 겹치지 않는 스타일은 적용이 됨. */
}

div{
   background-color: teal !important; 
   /* !important : 해당 스타일에 대한 우선순위를 높여줌. */
   color:red !important;
   /* 태그선택자보다 id선택자가 우선되기 때문에, 태그의 스타일이 부여되지 않음. */
   width:200px;
   height: 200px;
   /* 단, 겹치지 않는 스타일은 적용됨. */
}

</style>