더보기
CSS 선택자의 우선순위에 대해 알아보자
애밋 문법
div#id1.class1 👉🏻 div 만들 건데 id 속성값은 id1, class 속성값은 class1로 만들어 줘!
<!-- 애밋 문법 -->
<!-- div#id1.class1 + Enter -->
<div id="id1" class="class1">우선순위 테스트</div>
✔️ 기본적으로 css는 위에서부터 아래로 적용됨
동일한 요소를 같은 종류의 선택자로 선택했을 경우 가장 아래의 스타일이 적용됨
단, 동일한 요소를 다양한 종류의 선택자로 css가 부여된 경우 우선순위에 따라 적용됨
만약, 겹치지 않는 스타일이라면 반영이 잘됨
위에서 아래로 적용되어 yellow가 아닌 red가 덮어 씌워져 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 우선순위</title>
<style>
h1 {
background-color: pink;
color: yellow;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>선택자 우선순위</h1>
우선순위
우선순위 낮음 👉🏻 우선순위 높음
태그 선택자 -> 클래스 선택자 -> 아이디 선택자 -> 인라인 스타일 방식 -> !important
아이디 선택자가 클래스 선택자보다 우선순위 높음
<style>
h1 {
background-color: pink;
color: yellow;
}
h1 {
color: red;
}
#id1 {
background-color: maroon;
}
.class1 {
background-color: yellowgreen; <!-- 우선순위에 밀려 덮어씌워지지 않음 -->
}
</style>
<body>
<div id="id1" class="class1">우선순위 테스트</div>
</body>
우선순위가 높은 것들에 밀려 이미 적용된 background-color는 적용되지 않지만 그 이외의 color, width, hegiht는 잘 적용됨!
<style>
h1 {
background-color: pink;
color: yellow;
}
h1 {
color: red;
}
#id1 {
background-color: maroon;
}
/* 우선 순위에 밀려 적용되지 않음 */
.class1 {
background-color: yellowgreen;
}
/* 우선 순위에 밀려 적용되지 않음 */
div {
background-color: teal;
color: red;
width: 200px;
height: 200px;
}
</style>
인라인 스타일로 기술 시 바뀜
<body>
<!-- 애밋 문법 -->
<!-- div#id1.class1 + Enter -->
<div id="id1" class="class1" style="background-color: purple; color: pink;">우선순위 테스트</div>
</body>
!important 기술 시 가장 우선순위가 높으므로 해당 코드로 지정됨
<style>
h1 {
background-color: pink;
color: yellow;
}
h1 {
color: red;
}
#id1 {
background-color: maroon;
}
/* 우선 순위에 밀려 적용되지 않음 */
.class1 {
background-color: yellowgreen;
}
/* 우선 순위에 밀려 적용되지 않음 */
div {
background-color: teal !important;
color: red !important;
width: 200px;
height: 200px;
}
</style>