On this page
CSS 규칙 우선순위
수정하기
문서 생성 2021-09-16 13:53:56 최근 수정 2022-10-08 23:32:27
On this page
HTML 엘리먼트는 다양한 CSS 규칙의 타겟이 될 수 있다. 그리고 CSS 규칙에 우선순위가 있기 때문에 그 우선순위에 따라 어느 스타일이 적용이 될지 결정된다.
선택자에 따른 우선순위
더 높은 우선순위 그룹의 규칙이 있다면 낮은 그룹의 규칙은 무시가 된다. 여섯 개의 선택자 그룹을 우선순위에 따라 정리하면 다음과 같다.
!important- 인라인 스타일 속성
- 아이디 선택자
- 클래스/속성/가상 선택자
- 태그 선택자
- 전체 선택자
우선순위가 같은 선택자 그룹에 속해있다면?
규칙이 같은 선택자 그룹에 속해 있으면 선택자의 종류와 수에 따라 우선순위가 결정된다. 높은 우선순위의 선택자를 더 많이 사용한 규칙이 우선시되는 것이다.
아래 코드에서는 후자가 선택자의 종류가 더 많지만 전자는 클래스 선택자를 2개 사용하고 후자는 1개만 사용했으므로 전자의 우선순위가 더 높다. 따라서 color: blue;가 적용된다.
#introduction .message .warning span { color: blue; }#introduction .message div p sapn { color: red ;}
코드 위치에 따른 우선순위
규칙이 같은 선택자 그룹에 속하고, 같은 순위의 선택자를 같은 수만큼 사용한다면 위치에 따라 결정이 된다. 우선순위가 높은 위치에 있는 규칙이 낮은 위치에 있는 규칙을 덮어쓴다.
<head>내부의<style>내부<style>내부@import문으로 삽입한 CSS 파일<link>로 연결한 CSS 파일<link>로 연결한 CSS 파일 내부의@import문- 마지막으로 연결한 CSS 파일
!important규칙은 예외다. (1순위임)
- 브라우저의 기본 스타일
같은 코드 위치에 연결(삽입)된 경우 순서에 따라 우선순위가 결정된다. 나중에 연결(삽입)된 스타일이 우선순위가 높다.
그래서 <head> 내부에 <link>로 연결한 CSS 파일(External)과 <style> 내부 CSS는 작성된 순서에 따라 위치가 결정된다. CSS를-HTML에-적용하는-세-가지-방법 참고
충돌을 방지하려면
CSS 코드를 작성하는 동안 하나의 요소에 동일한 속성이 여러 번 적용되는 충돌 규칙을 작성하기 쉽다. 이를 방지하려면,
- 엘리먼트가 웹페이지에 단 한번 나타나더라도, id 대신 class 사용하기
- HTML 엘리먼트 하나가 여러 클래스를 갖고 있는 것을 피하기
- inline style 사용하지 않기