> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/css-1/cascade.md).

# 우선 적용 규칙

## 케스케이드(Cascade) 규칙

* 여러 개의 CSS 파일을 결합할 때, 충돌을 해결하는 프로세스가 Cascade 이다. 

## **중요성 (Importance)**

* !important 선언은 다른 모든 선언보다 우선권을 가진다.
* !important 가 적용된 속성을 덮어 쓰려면. 다시 !important를 사용해야 하기에 최대한(절대!) 사용하지 않도록 노력해야 한다. 

## **특성 (Specificity)**

* 선택자의 우선권에 대한 척도
* 각 척도를 1, 10, 100, 1000 단위로 생각하면 이해하기 좋다.

```
    요소 선택자 < 클래스 선택자 < ID 선택자 < 인라인 스타일
     0,0,0,1    0,0,1,0     0,1,0,0     1,0,0,0
```

{% hint style="info" %}
\*, >, +, \~ 등 콤비네이터(Combinators) 또는 :not() 가상 클래스는 특성에 영향을 주지 않는다.
{% endhint %}

### 예시

```
*                           --0000
a                           --0001
a.link                      --0011
li:nth-child(2) a:hover     --0022
.nav:nth-child(2) a:hover   --0031
#outer a                    --0101
#outer #inner a             --0201
style="color: tan"          --1000
                            --important
```

## **소스 순서**

* 중요성, 특성이 설정되지 않았거나 동일한 경우 나중에 나온 소스의 스타일이 우선권을 가진다.

### 예시

```
p.note { color: #930212; }
p { color: #d5727e; } // 우선권을 가진다.
```

## 참고&#x20;

* [CSS 케스케이드(Cascade)](https://goo.gl/BAhjiN)
* [class 속성 개수가 11개면 id 속성 보다 우선할까요?](https://goo.gl/AkC2LN)