CSS의 스타일상속,선택자우선순위에 대해서 알아보자

스타일 상속

개념

부모요소, 조상요소로부터 적용된 스타일이 자식요소(하위)로 상속되어져서 적용되는 개념

상속되는 CSS 속성들

1. 모든 글자/문자 속성이 상속되는 것은 아니다
2. 그런데 문자/글자 관련 속성들이 상속된다
3. font-style : 글자 기울기
4. font-weight : 글자 두께
5. font-size : 글자 크기
6. font-family : 폰트(서체)
7. line-height : 줄 높이
8. color
9. text-align : 정렬

강제상속

실질적으로 상속이 되지 않는 CSS 내용도 강제적으로 상속시킬 수 있는 내용

부모요소의 height 값이 바뀔 때, 자식요소의 값도 같이 바뀐다

.parent{
	height:200px;
    	weight:200px;
    }
    
 .child{
	height:inherit;
    	weight:200px;
    }   
    

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1. 점수를 매겨서 높은 선언을 우선함
2. 점수가 같으면 가장 마지막에 해석된 선언이 우선함

• 점수표
  • 인라인선언 : 1000점
  • !important : 무한대점수(중요도, 명시도)
  • id 선택자 : 100점
  • class 선택자 : 10점
  • tag 선택자 : 1점
  • 전체 선택자 : 0점
  • 상속은 별도의 점수를 적용하지 않는다.

3. 문제
   .list li .item : 21점
   .box::before : 11점(가상요소=tag선택자)
   .list li:hover : 21점(hover=가상클래스선택자)
   :not(.box) : 10점(부정선택자는 점수계산x)