전체적인 우선 순위
!important > inline style > style tag > css > browser default
CSS 파일 안에서 점수를 매겨 봅시다
!important : 무한대
id : 100점
class, attribute, pseudo-class : 10점
tag element, pseudo-element: 1점
예제로 파악해보자
.container { ... } /* 10점 */
#container { ... } /* 100점(적용) */
.container .first-child { ... } /* 10점 + 10점*/
.container #first-child /* 10점 + 100점(적용) */
.container div.first-child { ... }/* 10점 + 1점 + 10점 */
.container div /* 10점 + 1점 */
.container > div { ... } /* 10점 + 1점 */
.container div { ... } /* 10점 + 1점 (적용, 모두 값이 같을땐 가장 마지막을 적용한다)*/
'프로그래밍' 카테고리의 다른 글
| #4 부수효과 (0) | 2022.04.08 |
|---|---|
| #3 maybe 모나드와 either 모나드 (0) | 2022.04.08 |
| #2 함수의 합성 (0) | 2022.04.07 |
| #1 함수형 프로그래밍에서 모나드는 무엇인가? (0) | 2022.04.07 |
| typescript - enum 값에 따라 함수 타입 설정하기 (0) | 2022.04.05 |