CSS 선택자 우선순위

선택자 우선순위

더 높은 우선순위 그룹의 규칙이 있으면 낮은 그룹의 경쟁 규칙은 무시된다.

그룹은 해당 선택자의 명시도에 따라 분류된다. 낮은 우선순위 그룹의 선택자는 높은 우선순위 그룹의 선택자에 비해 명시도가 낮다.

선택자 우선순위를 결정할 때는, 일반적인 선택자는 문서의 전반적인 스타일을 설정하는데 적용하고, 더 구체적인 선택자는 일반적인 선택자보다 우선시하여 특정 스타일을 적용하길 권장한다.

 

특징

스타일 시트는 다음과 같은 3개의  CSS original source를 가질 수 있다.

1. 제작자(author) : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
2. 사용자(user) : 사용자가 직접 정하는 자신이 사용할 스타일
3. 사용자 도구(user agent) : 웹 브라우저 자체에 지정된 기본 스타일

 

우선순위 순서

!important 선언을 한 사용자 스타일 >! important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언(브라우저 자체의 선언)

 

CSS 명시도 계산 순위( 괄호( ) 안의 숫자는 점수를 나타낸다)

! important > 인라인 스타일 속성 > id(100) > class(10) > tag(1) > * (0)

• ! important선언을 사용한 형식이 가장 우선순위가 높아 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 한다.

예시

1.

div.wrap ul li a {}

 1+ 10 +1+1+1 = 14

==> 우선순위값은 14이 된다.

 

2.

div#wrap{}

 1+ 100 = 101

==> 우선순위값은 101이 된다.

 

-마지막에 지정된 스타일을 우선 적용한다.

스타일 우선순위가 같거나, 계산 방법이 없는 경우 마지막에 지정된 스타일이 우선으로 적용된다.

 

---

참고

http://www.nextree.co.kr/p8468/   

https://circlash.tistory.com/570