css 우선순위

css 우선순위

css는 어떤 속성이 우선되어 적용되는지가 이미 약속되어 있습니다.
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용합니다.

css 우선순위가 높은 순서

1. !important
2. css in-line 선언방식
3. id 방식
4. class 선택자
5. 태그 선택자
6. 전체 선택자
7. 상위 요소에 상속받은 속성

!important

우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important를 붙여서 적용시켜주면 됩니다.
!important는 우선선위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다.

section {
    box-sizing: border-box !important;
}

css in-line 선언방식

<div style="color:red;"></div>

id 선택자

#section {
    box-sizing: border-box;
}

class 선택자

.section {
    box-sizing: border-box;
}

태그 선택자

p {
    font-size: 10px;
}

전체 선택자

* {
    margin: 0;
}

상위 요소에게 상속받은 속성

body {
    color: #fff;
}

복합 선택자를 통한 우선 순위

1. div > ul > li > ul > .col { margin: 10px; }

2. div > ul > li > ul > li { color: #000; }

3. ul > .col { margin: 10px; }

4. ul > li { margin: 10px; }