CSS/CSS 이론
[CSS] CSS 디자인 우선순위
2주녘
2023. 8. 9. 15:55
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/20_cascading.css">
</head>
<body>
<!-- 부모태그 -->
<div id="id-div">
<!-- 자식태그 -->
<h1 class="class-heading" id="id-heading">레드향</h1>
</div>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤 보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
CSS 디자인 우선순위
- 같은 선택자 우선순위 : 가장 나중에 디자인 된 것이 우선적으로 디자인 적용됩니다.
- 부모 - 자식태그 : 자식태그의 디자인이 우선 적용됩니다.
- id선택자 > class 선택자 > 태그선택자 > 전체선택자 순으로 우선 적용됩니다.
우선순위를 고려하기 힘든 경우 OR 디자인 파일이 너무 많을 경우
현재 나의 디자인을 적용하고 싶을 경우 : 속성 : 값 !important; 적용
#id-div {
color: aqua;
}
/* h1 태그 */
#id-heading {
color: coral;
}
/* h1 태그 */
.class-heading{
color: green !important; // green 컬러를 우선 적용하고 싶을 경우
}
/* h1 태그 */
h1{
color: brown;
}
* {
color: black;
}
실행결과
반응형