CSS 상속_inherit,선택자 우선순위

[상속] : 부모의 css속성을 자식이 상속받을 경우 css가 동일하게 적용됩니다.

1. 상속 가능한 속성들

font-style: ;
font-weight: ;
font-size: ;
line-height: ;
font-family: ;
color: ;
text-align: ;

2. 강제 상속할 때 값에 inherit을 작성

.child{
   width: inherit;
  height: inherit;
  background-color: orange;
}

• width와 height는 부모의 크기를 그대로 상속받아 표현됨
• 참고) width는 작성하지 않아도 자동 상속되어 표현됨

3. 속성은 선택자 우선순위 순서에 따라 상속됩니다.

<기준>
1순위 : 점수가 높은 선택자가 더 높은 순위
2순위 : 점수가 같을 경우 가장 마지막에 읽힌 선택자가 더 높은 순위

<점수 기준>
•!important : 9999999999 점
•인라인 방식 : 1000 점
•#ID 선택자 : 100 점
•.Class 선택자 : 10 점

• :first-child / last-child / nth-child / :not 클래스 선택자
  •태그 선택자 : 1 점
• ::before, ::after 태그(요소) 선택자
  •전체 선택자(*) : 0 점
  *** Tip :
  1) [:] 1개일 경우 클래스 선택자로 보고,
  [::]2개일 경우 태그(요소) 클래스로 보면 됨]
  2) !important는 가능하면 실무에서 사용하지 않는 것을 권장