반응형
선택자의 우선순위
: 선택자가 동일한 경우 위에서 아래로의 순서대로 스타일을 적용한다. 이때, 같은 태그에서의 속성의 스타일을
재선언할 경우에는 마지막으로 선언된 스타일로 덮어씌워진다.
| 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일 → !important |
→ 선언의 종류가 다를 때, 위의 기준으로 순위를 적용한다. (!important 쪽으로 갈 수록 우선순위가 높다.)
<!DOCTYPE html>
<html>
<head>
<title>선택자 우선순위</title>
<style>
/*1. 태그 선택자*/
*{
background-color: lightgrey;
}
div{
background-color: bisque;
}
/*2. 클래스 선택자*/
.first{
background-color: aquamarine
}
.second{
background-color: brown;
}
/*3. 아이디 선택자*/
#first{ /*5. !important*/
background-color: aqua !important;
}
#second{
background-color: yellow;
}
</style>
</head>
<body>
<p>선택자 우선순위</p> /*4. 인라인 스타일*/
<div id="first" class="first" style="background-color:lightgreen;">
첫 번째
</div>
<div id="second" class="second">두 번째</div>
</body>
</html>
반응형