CSS 우선순위

katanazero86·2020년 3월 31일
0

css

목록 보기
2/2

CSS 적용 우선순위에 대해 알아보자😀

1. inline style
2. !important
3. id 선택자
4. class 선택자
5. tag 선택자
  • 만약 동일한 순위일 경우, 제일 나중에 있는 스타일이 적용된다.
<div>

  <p id="one" class="one-class">
    111111
  </p>
  <p>
    222222
  </p>
  <p>
    333333
  </p>
  <p style="color : black; font-size:20px;">
  444444
  </p>
  <p class="important-class">
    important
  </p>

</div>




// style
#one {
  color : red;
}


.one-class {
  color : blue;
}

p {
  color : green;
}

p {
  color : skyblue;
}

.important-class {
  color : pink !important;
  font-weight : 600;
}

.important-class {
  color : hotpink;
  font-weight : 500;
}

위와 같은 경우에는 어떻게 적용이 될까?

😅 저는 처음에 해당 요소에 중복이 되면 무조건 마지막에 적용된 style 또는 !important 키워드가 붙은 속성이 적용이 될거라 생각했는데 잘못 알고있었네요

  • 제일 우선순위가 높은건 태그내에 직접 작성한 스타일(inline style)
  • 다음으로 우선순위가 높은건 !important 키워드
  • #id 선택자
  • .class 선택자
  • tag 선택자

style 정보를 불러와서 적용하는 순위다 😲

1. <head> 요소 안의 style 요소
2. <style> 요소안의 @import 문
3. <link> 요소로 연결된 CSS 파일
4. <link> 요소로 연결한 CSS 파일 안의 @import 문
5. 최종 사용자가 연결한 CSS 파일
6. 브라우저의 기본 스타일시트
profile
developer life started : 2016.06.07 ~ 흔한 Front-end 개발자(현재는 백수 얏호👻)

0개의 댓글