CSS Cascading (우선순위)

CSS Cascading

우선 순위가 높은 규칙일 수록 우선적으로 속성을 적용한다.

 

 

스타일 시트의 순서

브라우저의 기본 스타일(user Agent Stylesheet)은 우선순위가 낮아서 사용자가 작성한 코드로 덮어 씌어진다.

 

개발자 도구에서 user agnet style이 브라우저 기본 스타일이다.

 

 

 

예시 ) 브라우저 기본 스타일보다 유저가 작성한 스타일시트가 우선순위가 높아서 h1은 15px로 적용된다.

// 브라우저 기본 스타일

h1 {
  display: block;
  font-size: 13px;
  ...
}

// 유저가 작성한 스타일

h1 {
  font-size: 15px;
}

 

 

 

참고로 html에 직접 작성하는 인라인스타일이 우선순위가 가장 높다.

// style.css

.login {
  background: blue;
}

// index.html

<a class="login" style="background: red">로그인</a>

 

 

코드 상의 순서

 

코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높다. 예를 들어서 아래 코드에서 글자 크기는 20px이 된다.

.content {
  font-size: 10px;
}

.content {
  font-size: 20px;
}

 

 

선택자 명시도

 

선택자마다 명시도 점수가 있다. 아이디 개수, 클래스 개수, 태그 순으로 개수를 적어서 점수를 비교한다.

여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용된다.

 

예를 들어서 아래 코드에서 p.contet는 0 1 1 이지만 p.#info는 1 0 1이기 때문에 명시도는 p.#info 가 더 높다.

p.content { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
  ...
}

p.#info { /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
  ...
}

 

명시도 계산 사이트

https://specificity.keegan.st/