Skip to content

Kyunghwa Yoo

CSS 우선순위

— css — 1 min read

CSS는 동일한 엘리먼트가 중복되어 설정될 수 있다. 그렇기 때문에 우선순위가 존재한다. 우선순위는 다음과 같다.

선택자 우선순위

  1. !important 가 붙은 속성
  2. HTML태그에 inline 으로 직접 정의된 속성
  3. 선택자가 ID(#) 로 지정된 속성
  4. 선택자가 Class(.) 나 psuedo-class(:) 로 지정된 속성
  5. 선택자가 태그명(div, span 등등)으로 지정된 속성
  6. 선택자가 전체선택자(*)인 속성
  • 우선순위가 동일한 속성중에서 개수가 더 많은 쪽이 우선권을 가진다.
  • 우선순위가 동일하고 개수도 동일하다면 나중에 정의된 속성이 우선권을 가진다.

삽입위치 우선순위

  1. <head> 태그 안의 style 요소
  2. <style> 태그 안에서 선언된 @import 문
  3. <link> 태그로 연결된 CSS 파일
  4. <link> 태그로 연결된 CSS 파일의 @import 문
  5. 최종 사용자가 연결한 CSS 파일
  6. 브라우저에서 정의한 기본 스타일시트
  • 예외적으로 최종 사용자가 연결한 CSS 파일의 !important 규칙은 모든 규칙을 무시하고 우선순위 1위이다.
© 2020 by Kyunghwa Yoo.