CSS 우선순위

같은 속성이 동시에 부여 될 때 우선순위를 매김

 

기본 룰

 - 뒤에 선언하는 css가 우선순위가 높다. (CSS 이름에서 부터 짐작 할 수 있음)

 - 높은것부터 나열

   - !important

   - inline style

   - id

   - class

   - 다른 attribute

   - pseudo class ex) first-child

   - tag element

   - pseudo element ex) ::before

 - 우선순위가 같다면 개수가 많은 선언이 우선순위가 높다 (올림픽 랭킹 산정 로직)

 

class 끼리 우선순위

현업에서 헷갈리는 케이스에 대해 좀더 설명하려 한다.

class끼리 곂쳤을 때에도 우선순위를 결정해야한다.

 

class 끼리 우선순위는 마치 올림픽 메달 개수에 따라 랭킹을 매기는 방식과 같다.

은메달 100개 있어도 금메달 1개가 더 우선순위가 높다는 것을 알고 있다면 쉽게 이해할 수 있다.

즉, class 하나 보다 class 두가 달린 css가 더 우선순위가 높다는 뜻

 

 

 

https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5

(CSS) CSS 적용 우선순위 - CSS간 충돌 해결 방법