단비의 코딩 공부 blog

CSS 우선 적용 순서 본문

css

CSS 우선 적용 순서

황굽달 2022. 9. 29. 14:13

1. html - 속성값 뒤에 !important; 가 붙어있는 속성

2. html - 스타일을 직접 지정한 속성 <p style="">

3. css - 선택자에 #id가 쓰인 속성

4. css - class, attribute(input[type=""]등), pseudo-class(:hover, :active 등)로 지정한 속성

5. 태그 이름으로 지정한 속성

6. 부모영역에 의해 상속된 속성 

 

*같은 우선 순위에 있는 경우에는 설정된 css 개수가 많은 경우가 우선시되고

모든 설정이 같은 경우 제일 나중에 선언한것이 우선되어 적용된다.

 

우선 순위를 무시하고 적용시킬경우 !important를 사용하지만

스타일 시트 흐름을 방해할 수 있기때문에 되도록 쓰지 않는 것이 좋다.