해나아부지 개발일지

CSS 적용 우선순위는 ? 본문

Developers/HTML&CSS

CSS 적용 우선순위는 ?

__APPA 2021. 5. 28. 09:14
  1. 속성 값 뒤에 !important 를 붙인 속성
  2. HTML에서 style을 직접 지정한 속성
  3. #id 로 지정한 속성
  4. .class, :추상클래스 로 지정한 속성
  5. 태그이름 으로 지정한 속성
  6. 상위 객체에 의해 상속된 속성
<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;
  }

 

출처 css 적용 우선순위 - ofcourse

'Developers > HTML&CSS' 카테고리의 다른 글

display: flex 가 렌더링에 미치는 영향에 대해  (0) 2023.03.16
div 속 img 하단 여백 없애기!  (0) 2023.02.02
[CSS] Box Model 너 뭐야!?  (0) 2021.06.18
[CSS] 선택자에 대해서 알아보자  (0) 2021.05.28
'Developers/HTML&CSS' Related Articles more
Comments