스타일 상속, 우선순위, 우선순위점수

 

• 동물의 상속관계에서 스타일을 물려받는 것을 볼 수 있다. 
• 스타일 속성 중에서 글자와 관련된 속성들은 모두 자식에게 물려주게 된다. 

• 같은 요소에 다양한 방법으로 스타일을 적용했는데, 스타일이 적용되는 우선순위가 있다는 것을 확인할 수 있다.

우선 순위 점수

• css 우선순위는 사실 점수로 작동하기 때문에 점수를 자세히 알아야 한다. 

• !important : 무한대

 !important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다. 

 

div {
	color: red !important;
}

 

• 인라인 선언 방식 : 1000점

 인라인 선언 방식은 html 내부에서 style 속성을 이용한 방식으로 1000점이 부여됩니다. 

 

<div>
	<p style="color: red;">Contents</p>
</div>

 

• id 선택자 : 100점

#name {
	color: red;
}

 

• class 선택자 : 10점

.name {
	color: red;
}

 

• 태그 선택자 : 1점

p {
	color: red;
}

 

• 전체 선택자 : 0점

* {
	color: red;
}

 

• 부정 선택자 : 0점

:not(p) {
	color: red;
}

우선 순위 점수 계산 연습

li ul li

태그-태그-태그 : 1 + 1 + 1 = 3점입니다. 

.frod p ul li

클래스-태그-태그-태그 : 10 + 1 + 1+ 1 : 13점입니다.