DEVELOPyo

CSS 적용 우선 순위

1. 사용자 스타일 시트 우선

!important 선언을 한 사용자 스타일  > !important 선언을 한 작성자 스타일 >
작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언)

2. 계산결과가 높을 수록 우선 적용된다.

a = 선택자중 ID의 수를 세어 100자리에 놓는다,

b = 선택자중 가상 클래스와 클래스의 수를 세어 10자리에 놓는다.

c = 선택자중 엘리먼트의 수를 세어 1의 자리에 놓는다.

3. 가장 마지막에 지정된 스타일이 우선 적용된다.

<style type="text/css">

  p.test{color:black;}

</style>

<p class="test" style="color:red;">TEST</p>

위 경우 동일한 p 태그의 test 클래스에 red 색상 css 가 선언되어있다.

p 태그가 마지막에 지정된 스타일이므로 TEST 문구는 red 속성이 적용된다.

*생활코딩 사이트 내용 정리.

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