Developers/HTML&CSS
CSS 적용 우선순위는 ?
__APPA
2021. 5. 28. 09:14
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- .class, :추상클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
<html>
<head>
<style>
#my-box .text{ color: black } // 3번째 우선순위
.black{ color: blue } // 4번째 우선 순위
.important-black{ color: red !important } // 1번째 우선순위
</style>
</head>
<body>
<div id="my-box">
<div class="text">My text 1</div>
<div class="text black" style="color: yellow;">My text 2</div> // 2번째 우선순위
<div class="text important-black">My text 3</div>
</div>
</body>
</html>
// 5번째 우선순위
div {
color: red;
}