CSS 우선순위

출처

CSS Selector 이해

• https://www.nextree.co.kr/p8468/

CSS 우선순위

• https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5
• https://engkimbs.tistory.com/913

CSS 스타일 우선순위(CSS Style Precedence)

CSS의 C는 캐스캐이딩(Cascading)의 약자로 "위에서 아래로 흐르는 스타일 시트"라는 뜻입니다. 이러한 방식으로 CSS는 위에서 아래로 차근차근 스타일을 분석하여 중복되는 스타일일 경우 우선순위를 두어 css 스타일 중복을 방지하고 있습니다.

우선순위 등급 매기기

css 점수표를 통해 총 합이 가장 높은 css 스타일을 채택한다.

1. !important (10000점)
2. 인라인 스타일 (1000점)
3. id(100점)
4. class + 수도클래스(:first-child) (10점)
5. 태그 + 수도엘리멘트(::before) (1점)

그 외

• 우선 순위가 같다면 개수가 많은 css가 우선순위가 높습니다.
• 기본적으로 뒤에 나오는 css가 우선순위가 높습니다.
  (if 내부 스타일 vs 외부 스타일이라면 가장 밑에 있는 것 적용)

<style>
  test {
  	color : red
  }
  <link rel= "stylesheet" href = "./styles.css">
  
  <!-- 가장 밑에 있는 외부 스타일이 적용된다. -->
</style>

번 외

다양한 CSS Selector를 알고 싶다면

링크 : https://www.nextree.co.kr/p8468/