CSS
선택자 우선순위
dev-in-daily-life
2022. 2. 2. 11:10
반응형
CSS 우선순위
- 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. 점수가 높은 선언이 우선함.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함.
- 점수
ID 선택자 : 100
Class 선택자 : 10
tag 선택자 : 1
전체(*) 선택자 : 0
인라인 선언 : 1000
- 스타일 속성에 " !important " 를 입력하면 우선순위가 0순위로 적용됨.
ex) .green{ color: green !important; }
- 다음과 같이 스타일 적용 시 div 태그 안의 글자는 어떤 색으로 표시되는가?
<head>
<style>
.green{
color: green;
}
</style>
</head>
<body>
<div id="yellow" class="green" style="color:orange;">
우선순위!
</div>
</body>
=> 인라인으로 선언한 속성이 우선이므로 orange 색으로 표시됨.
반응형