개발공부/HTMl+CSS+JAS

[CSS] CSS적용 순서

ssoyxon 2023. 3. 21. 23:06

CSS 스타일 적용 우선순위는 다음과 같습니다:

  1. !important가 적용된 속성
  2. 인라인 스타일 (예: <p style="color: red;">)
  3. ID 스타일 (예: #my-id { color: blue; })
  4. 클래스 스타일 (예: .my-class { color: green; })
  5. 타입 스타일 (예: h1 { color: purple; })
  6. 상위 요소의 스타일

  • <h1 id="my-header" class="my-class">Hello World</h1>
    
    
    #my-header {
      color: red;
    }
    
    .my-class {
      color: blue;
    }
    
    h1 {
      color: green;
    }
    
    

해당 h1 요소는 id 스타일의 color: red가 적용되므로 빨간색으로 표시됩니다.