CSS 캐스케이딩 순서
css 적용시 우선순위 기준
구체성(명시도)
ID 선택자 > 클래스 선택자,가상 선택자 > 태그 선택자 > 전체 선택자 > 부모에게 상속받은 속성
전체 선택자
* { color : red; }
태그 선택자
p { color : red; }
class 선택자 (& 가상 선택자)
.class { color : green; }
id 선택자 (& 가상 선택자)
#id { color : green; }
강제로 명시도 끌어올리기
!important
우선순위를 무시하고 가장 최상위 우선순위로 변경할 수 있는 CSS 명령어
자칫 잘못 사용했을 시, 페이지 css를 꼬을 수 있으니 사용할 떄 주의해야함.
( 사용하지 않는 편이 가장 좋음 😅 )
선언순서
나중에 선언한 스타일이 우선 적용된다.
<body>
<div class="text-class" id="text-id">
텍스트 입니다.
</div>
</body>
<style>
#text-id{
color: red;
}
#text-id{
color: blue;
}
#text-id{
color: green;
}
</style>이 경우 가장 마지막에 선언 되었던 color: green; 이 적용된다.
absolutely love this part