[CSS] CSS 적용 우선순위

 

  스타일을 적용하는 데에는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 Element에 적용되는 스타일이 충돌할 수도 있다. 따라서 스타일 적용에 대한 우선순위 규칙을 알아 둘 필요가 있다.

 

  CSS 적용의 우선순위는 아래와 같다(1이 높은 우선순위, 6이 낮은 우선순위).

 

  1. !impoartant

    : 속성 값 뒤에 !important를 붙인 속성

 

  2. Inline style attribute

    : HTML에서 style을 직접 지정한 속성

 

  3. ID 선택자(#id)로 지정한 속성

 

  4. Class 선택자(.class), pseudo class(가상 클래스, ex. :first-child)

 

  5. Tag Element

    : tag 이름으로 지정한 속성

 

  6. 상속된 속성

    : 부모 태그의 스타일이 자식 태그의 스타일에 상속되어 적용된 것

 

 

  그리고 여기에 추가로 몇 가지 우선순위 규칙이 부여된다.

 

1. 원천 소스 중 사용자 스타일시트가 가장 우선한다.

  작성자쪽의 스타일시트보다 사용자쪽의 스타일 시트를 우선적으로 적용한다. 속성에 !important를 선언한 경우 스타일의 우선순위는 다음과 같다(1이 높은 우선순위, 5가 낮은 우선순위).

 

1. !important를 선언한 사용자 스타일(사용자 중요 선언)

2. !important를 선언한 작성자 스타일(작성자 중요 선언)

3. 작성자 스타일(작성자 일반 선언)

4. 사용자 스타일(사용자 일반 선언)

5. User Agent선언(브라우저 자체 선언)

 

2. 적용된 스타일의 조합들을 토대로 특정도 값을 계산해 가장 많은 점수를 받은 것이 우선된다.

  더 특정적인 선택자가 더 일반적인 선택자보다 우선한다는 것이다. 우선순위 산출을 위한 특정도 계산식은 아래와 같다.

 

• Inline style attribute: 1000점

• ID 선택자: 100점

• Class 선택자 및 pseduo class: 10점

• Tag Element: 1점

  

3. 뒤에 지정된 css의 우선순위가 높다.

  모든 설정이 같은 경우 나중에 선언한 것이 우선된다.

 

 

 

 

 

 

 

참고 자료

https://engkimbs.tistory.com/913

https://opentutorials.org/module/484/4149

https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5

https://velog.io/@jch9537/CSS-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84