CSS 케스케이딩에 대하여

• 케스케이딩 이란?

 

다양한 CSS 선언의 영향을 받을 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 한다.  

CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라지며 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아진다. 또한 CSS선언을 나중에 할수록 우선순위가 높아진다.

 

 

style>id 선택자>class 선택자>tag 선택자 순으로 우선순위가 정해진다.

 

단  !important을 사용한다면 제일 큰 우선순위가 정해진다.

 

 

 

여기서 제일 큰 우선 순위는 제일 구체적이고 직관적인 style이다. 그래서 텍스트 "케이케이딩2"는 style이 설정한 색 검정색으로 혼자 변해 있다.

 

 

하지만 제일 우선순위가 낮은 tag 선택자인 <li>부분에 !important을 붙이자 우선순위가 제일 컸던 style의 영향력까지 무시하며 "케스케이팅2" 또한 같이 빨간색으로 바뀐 상태를 볼 수 있다.