[CSS] 캐스케이드

CSS에서 font-color나 font-size 등 여러 번 선언되는 요소들이 있다. 이 때, 어떤 요소가 적용될 것인가? 

이 때 우선순위를 정해주는 것이 캐스케이드이다.

h2{
  요소;
}

h2를 선언할 때 기본으로 주어지는 default 값이 있다. 하지만 우리가 h2에 선언한 요소가 있다면 default보다 우선순위가 높다.

.test{
  color:red;
}
.test{
  color:blue;
}

동일한 선언자를 선언하고 겹치는 요소가 있다면 아래쪽이 우선순위가 높다.

 

선택자들끼리 우선순위를 비교하기 위한 명시도가 있다.

명시도는 [아이디 클래스 태그] 순으로 나타낸다.

예시) .test.abc 와 .test#abc 를 비교하자.

.test.abc 는 클래스 2개이므로 명시도는 0 2 0이다.

.test#abc는 아이디 1개 클래스 1개이므로 명시도는 1 1 0 이다.

따라서 .test#abc가 .test.abc보다 우선순위가 높다.