[CSS] CSS를 적용할 때 우선으로 적용되는 순서는 뭘까? / id, class, tag 의 우선 순위 알아보기

 

 

프로젝트를 하다보니 내가 css 적용 순서를 정확히 모르고 있다는 걸 알게 되었다.

css 우선순위를 정리해봐야지~

 

📍 CSS 우선 순위 

 

1. !important를 붙인 속성

2. 인라인 속성(태그 안에 직접 style로 지정한 속성)

3. id 

4. 클래스, 추상클래스 속성

5. 태그 속성

6. 부모 클래스에 의해 상속된 속성(자식 클래스)

 

 

+) 부스트코스에서 css 순서는 id는 금메달, class는 은메달, tag는 동메달로 이해하라고 했당

 

+) id는 적용할 때 #id , 클래스는 .class

 

---

EX)

 

🧐 똑같은 게 2개일 때는?

가장 나중에 적힌 놈으로 적용된다.

 

p {

color : red; }

 

p { 

color : blue; }

 

==> blue가 적용된다.

 

 

 

🧐 부모 태그 안의  h1와  그냥 h1이 있을땐?

더 구체적인 놈에게 우선 점수를 드립니다!

 

body > h1 {

color: red; }

 

h1 {

color: blue; }

 

==> red가 적용된다.