Beny's Study
05. 선택자 우선순위 본문
선택자 우선 순위
■ 기본적으로 CSS속성은 위에서부터 아래로 적용
■ 같은 태그(요소)에 여러 CSS속성이 설정된 경우 우선순위에 따라 적용됨
1. !important 설정된 속성
2. 인라인 스타일
3. 아이디 선택자
4. 클래스 선택자
5. 태그 선택자
<!DOCTYPE html>
<html>
<head>
<title>선택자우선순위</title>
<meta charset="UTF-8">
<style>
#test2,
#test3 {
background-color: yellow;
}
div {
width: 100px;
height: 100px;
background-color: orange;
}
.test {
background-color: purple;
}
p {
background-color: red;
}
p {
background-color: violet !important;
}
</style>
</head>
<body>
<hr>
<h2>선택자 우선순위 테스트</h2>
<div id="test1" class="test">우선순위 테스트1</div>
<div id="test2" class="test" style="background-color: yellowgreen;">우선순위 테스트2</div>
<p id="test3" class="test">우선순위 테스트3</p>
<p id="test4" class="test">우선순위 테스트4</p>
</body>
</html>
'CSS_VSC' 카테고리의 다른 글
| 07. 문단스타일 (0) | 2022.06.16 |
|---|---|
| 06. 글꼴 관련 스타일 (0) | 2022.06.16 |
| 04.CSS선택자 (형제관계 태그 중 선택,문자선택자,부정선택자,일반구조선택자,형태구조선택자) (0) | 2022.06.14 |
| 02. CSS선택자(모든선택자,태그선택자,아이디선택자,클래스선택자) (0) | 2022.06.14 |
| 01. CSS 기본 문법 (0) | 2022.06.14 |
'CSS_VSC' Related Articles
more
