css 덮어쓰기

이미 만들어진 css를 고쳐야 할 때 덮어쓰기를 할 수 있다.

 

1. 같은 클래스명이나 스타일을 하단에 작성

css 파일이 하나일 때,

.box {
  background : red;
}

.box {
  background : blue;
}

 이렇게 작성하면 하단이 더 우선시 된다.

 

2. id나 style등 우선순위를 높여서 작성

tag<class<id<style="" 순으로 우선순위가 높다. 따라서 class 스타일을 덮으려면 id 나 style로 수정하면 된다.

그리고 

.box {
  background : red !important;
}

.box {
  background : blue;
}

이렇게 !important를 써주면 클래스가 상단에 있어도 우선 적용된다.

( tag부터 순서대로 1점 10점 100점 1000점 10000점이며, id는 기능개발에 주로 쓰이므로 피하는게 낫다.)

 

3. 구체성 점수 높여서 작성

div.container div.box {
  color : red;
}

div.container .box {
  color : blue;
}

위는 태그 2개 클래스 2개라 22점

밑은 태그 2개 클래스 1개라 21점이므로

위의 스타일이 적용된다. 이렇게 구체성을 높여서 css를 덮어 쓸 수 있다.