Table of Contents
CSS 적용 우선순위
인라인 스타일(inline style)
인라인 스타일(inline style) 이 최우선 적용됩니다.
내부 스타일(internal style) 과 외부 스타일(external sytle)
내부 스타일(internal style) 과 외부 스타일(external sytle) 이 공존하는 경우 아래쪽에 적혀있는 스타일이 적용됩니다.
동일 레벨(내부 스타일 or 외부 스타일)
동일 레벨(내부 스타일 or 외부 스타일) 에 클래스 스타일과 태그 스타일이 공존하는 경우 클래스 우선 적용됩니다.
여러개의 외부 스타일
여러개의 외부 스타일이 있는 경우 가장 마지막 외부 스타일이 우선 적용됩니다.
// test.css
p {
color: #FFFF00;
}
.testp {
color: #00FFFF;
}
div {
color: #FFFF00;
}
.testdiv {
color: #00FFFF;
}// test2.css
.testdiv {
color: #000000;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.testp {
color: #0000FF;
}
p {
color: #00FF00;
}
</style>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="test2.css">
</head>
<body>
<!-- 인라인 스타일(inline style) 이 최우선 적용 -->
<p style="color: #FF0000;">
#FF0000
</p>
<!-- 내부 스타일(internal style) 과 외부 스타일(external sytle) 이 공존하는 경우 아래쪽에 적혀있는 스타일이 적용 -->
<p>
#FFFF00
</p>
<!-- 동일 레벨(내부 스타일 or 외부 스타일) 에 클래스 스타일과 태그 스타일이 공존하는 경우 클래스 우선 적용 -->
<p class="testp">
#00FFFF
</p>
<!-- 여러개의 외부 스타일이 있는 경우 가장 마지막 외부 스타일이 우선 적용 -->
<div class="testdiv">
#000000
</div>
</body>
</html>