CSS규칙의 우선순위

우선순위는 아래와 같이 적용 됩니다.

1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 [style]을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

!Important?
우선순위를 무시하고 , 꼭 적용 시키고 싶은 속성이 있다면 속성 값 뒤에 !important를 붙여주면 우선순위를 무시하고 상위 우선 순위가 됩니다.

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우를 높은 우선 순위로 간주합니다.

부모 자식 관계도 같을 경우, 나중에 선언된 것이 우선되어 적용 됩니다.

#i {
  display: inline-block;
  background: skyblue;
}

.a.b {
  background: red;
  color: blue;
}

.c {
  background: white;
  color: red;
  font-style: normal;
}

div {
  background: darkred;
  color: white;
  text-decoration: line-through !important;
}

1번 규칙에 의하여 text-decoration: line-through 속성이 적용되었고, 3번 규칙에 의하여 display: inline-block 이 적용됩니다. 4번 규칙에 의해 다음은 클래스의 수가 2개인 .a.b 에서 color: blue 속성이 적용 됩니다.