CSS 우선순위 계산
CSS를 적용할때 적용범위가 겹치는 경우가 많은데 그런 상황에서 어떠한 부분이 우선되어 적용 되는지 알아보자
1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3.내부 ,외부, 인라인 스타일 시트중 인라인을 우선시 적용
4. 계산식
-inline : 1000점
-id 속성: 100점
-class,속성 선택자 : 10점
-element : 1점
5.!important 를 적용하면 0순위
HTML 예제 코드
<!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>Css 우선순위</title>
<style>
#id-style{background-color: deeppink;}
#id-style2{background-color: deepskyblue;}
div{
display: block;
padding: 30px;
margin: 30px;
background-color: gold;
}
.class-style3{
background-color: navajowhite !important;
}
.class-style2{
background-color: pink;
font-size: 25px;
}
.class-style{
background-color: greenyellow;
}
ul>li.li-class{
background-color: orange;
}
ul>li{
background-color: violet;
}
</style>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<h2>css 우선순위</h2>
<div style="background-color: aqua;">div 1번(인라인 스타일 우선:aqua)</div>
<!--아쿠아-->
<div id="id-style" class="class-style">div 2번(id 점수 우선 :딥핑크)</div>
<!--딥핑크-->
<div class="class-style">div 3번(class 점수 우선:그린엘로우)</div>
<!--그린엘로우 -->
<div class="class-style2 class-style">div 4번(같은 속성일경우 나머지 적용한 속성이 우선:그린엘로우)</div>
<!--그린엘로우-->
<div>div 5번(같은 요소일 경우 나중에 적용한 속성(외부)가 우선시:퍼플)</div>
<!--퍼플 -->
<ul>
<li class="li-class">li 1번(총점이 높은 속성이 적용:오렌지/ ul요소와 li,마지막 class까지 총점으로 계산됨)</li>
<!--?-->
</ul>
<div id="id-style2" class="class-style3">div 6번(!important로 우선순위 최고:베이지)</div>
<!--베이지-->
</body>
</html>
외부 CSS 코드
div{
background-color: purple;
}
결과
각각의 값들의 주석들 달아주었다.
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| JavaScript_변수 (0) | 2023.04.04 |
|---|---|
| JavaScript _실행 순서 (0) | 2023.04.04 |
| CSS_animation (0) | 2023.04.03 |
| CSS_transition (0) | 2023.04.03 |
| CSS_transfrom (0) | 2023.04.03 |
