css의 순위

  css는 같은 태그에 속성이 여러번 적용 될 수 있으며, 가장 마지막 설정의 스타일이 실제 태그에 적용
  단 CSS 기준의 적용 우선순위가 있을 경우 해당 우선순위에 따라 CSS가 덮어 씌워진다. */
           

순위 : 태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 선택자 < !important 순으로 우선권을 가진다
            
 즉 !improtant가 가장쌔다.!important가 붙은 같은 선택자가 두개이상이 있을경우에는 마지막게 적용된다.
   만약 다른 선택자가 있으면 일반 우선순위를 따라간다
            
                div{
                    width: 300px;
                    height:  300px;
                    background: lightgray
                }

                .test1{
                    background: yellowgreen ; 
                    color: white ;
                }


                #test1{
                    background :tomato;
                    color : grey
                }

         

      만약 div 태그가 여러개 있으며,  div 중 class에 test1 또는 ___ test1 ____ 인것이 있고,

      그중 class test1을 가지고 id가 test1인 것이 있다고 하자.

 

크기는 div 에서만 적용되었기 때문에 모든 div 의 크기는 300px, 300px다.

그리고 class에 test1이 포함 된 div의 배경색은 yellowgreen, 글자색은 흰색이 된다.

마지막으로 id가 test1인 div는 배경색이 tomato, 글자색이 회색이 된다.

 

단 마지막에 아래와 같은 css가 있을시 아이디가 test1인 것을 포함해 class에 test1이 들어간 모든 div태그는 배경색이 blue, 글자색이 흰색이 된다. 

               .test1{
                    background: blue !important; 
                    color: white !important;
                }