[CSS] 적용 우선 순위

서근

2022. 9. 5. 10:50

QUOTE THE DAY

CSS 적용 우선순위

CSS에는 태그에 속성이 중복되어 설정될 수 있습니다. 이럴 때 어떤 속성이 우선되어 적용되는지 우선순위를 보면 다음과 같습니다.

우선순위는 아래와 같습니다.

!important
inline style (HTML내부에 사용된 style 속성)
#id
.class
tag
상위 객체에 의해 상속된 속성

같은 우선순위에 있는 경우에는 부모 클래스가 우선 적용되며, 모든 설정이 같은 경우 CSS 스타일 시트에서 나중에 선언한 것이 우선되어 적용됩니다.

!important

만약 우선순위를 무시하고 적용해야 하는 속성이 존재한다면, 속성 값 뒤에 !important 를 붙여서 적용시켜 줄 수 있습니다.

.normal { color: blue }
.compulsion{ color: black !important }

\만약 Important가 중복된다면, 나중에 선언된 것이 적용됩니다.

<html>
<head>
<style>
	#my-box .text{ color: black }
	.black{ color: red }
	.important-black{ color: red !important }
</style>
</head>
<body>
	<div id="my-box">
		<div class="text">My text 1</div>
		<div class="text black">My text 2</div>
		<div class="text important-black">My text 3</div>
	</div>
</body>
</html>

출력 결과

My text 1
My text 2
My text 3

TIP

웬만해서는 최대한 낮은 순위인 id 또는 class를 사용하는 것이 좋습니다.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'FRONT-END > CSS' 카테고리의 다른 글

[CSS] 결합/연결자 - Combinators (0)	2022.10.06
[CSS] Collapsing-Margin (마진 겹침 현상) (0)	2022.10.06
(CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법 (30)	2022.07.07
이미지 드래그 & 오른쪽 마우스 막는 방법 (37)	2022.07.05
(CSS) background-size에 hover transition animation 적용 안될때 해결방법 (3)	2022.07.03