[CSS] 선택자 우선순위
컴퓨터/CSS<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 우선순위</title>
<style>
h1 {
background-color: aquamarine;
color: brown;
}
h1 {
background-color: beige; /* 위에서부터 아래로 */
}
#id1 {
background-color: darkolivegreen;
}
.class1 {
background-color: orange; /* 우선순위에 따라서 클래스 먼저 */
color: white;
}
div {
width: 200px;
height: 200px;
background-color: cadetblue !important;
color: red;
}
</style>
</head>
<body>
<h1>선택자 우선순위</h1>
<p>
기본적으로 css는 위에서부터 아래로 적용됨<br>
동일한 요소를 다양한 선택자로 css가 부여된 경우 우선순위에 따라 적용됨<br>
태그선택자 -> 클래스선택자 -> 아이디선택자 -> 인라인스타일방식 -> !important
</p>
<!-- 인라인 스타일 방식 -->
<div class="class1" id="id1" style="background-color: darkcyan;">우선순위 테스트</div>
</body>
</html>
<화면>
'컴퓨터 > CSS' 카테고리의 다른 글
| [CSS] 텍스트 관련 스타일 (0) | 2024.06.27 |
|---|---|
| [CSS] 글꼴 관련 스타일 (0) | 2024.06.27 |
| [CSS] 기타 선택자 (2) | 2024.06.27 |
| [CSS] 기본 선택자 (0) | 2024.06.26 |
| [CSS] hello CSS (0) | 2024.06.26 |