[CSS] - 캐스캐이딩(cascading)

조가든·2022년 9월 20일
0

css

목록 보기
3/14
post-thumbnail

캐스캐이딩

  • 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 함.

  • 중요도
  1. <head><style>
  2. <head><style> 내의 @import
  3. <link>로 연결된 CSS 파일
  4. <link>로 연결된 CSS 파일 내의 @import
  5. 브라우저의 기본 CSS
  • 명시도
  1. !important
  2. inline 스타일
  3. 아이디 selector
  4. 클래스 / 가상 선택자
  5. 태그 선택자
  6. 상속된 스타일
  • Specificity Calculator
<style>
  div p {
    color: red;
  }
  p {
    color:blue;
  }
</style>

<div>
  <p>Hello</p>
</div>
  • 코드 순서에 따르면 p가 나중에 적용되었으므로 파란색이 되어야 할 것임

  • 그러나 결과는 빨간색

  • 1번의 경우 <div> , <p> 두 요소에 대하여 스타일이 적용되어야 하므로 2점

  • 2번의 경우에는 <p> 요소에 대해서만 스타일이 적용되므로 1점입니다.

profile
jo_garden

0개의 댓글