CSS 우선 적용 순서

 

같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선순위로 적용될까? 아래와 같은 순서로 우선순위가 적용된다.

 

1. 속성값 뒤에 !important 가 붙어있는 속성
2. 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성
3. 선택자에 id가 쓰인 속성
4. class, attribute, pseudo-class로 지정한 속성
5. 태그 이름으로 지정한 속성
6. 부모 요소에 의해 상속된 속성

이때 만약 똑같은 선택자가 아래에 반복해서 나오면 이전의 것을 덮어쓰게 된다. 이전의 것을 덮어쓰지 않으려면 !important를 사용해 주어야 한다.

 

<div>
  <p>안녕? 친구하지 않을래?</p>
</div>

<style>
  p {color: blue !important;}
  p {color: red;}
  /* 두번째 속성값이 덮어쓰지 않고 블루 색상으로 보여짐*/
</style>