Q. 선택자가 겹쳤을 때, 누구를 먼저 보여줄 것인가?
Specificity 명시도
결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘
이 알고리즘 안에 내부적으로 명시도 점수가 존재한다.
1. ! important
2. Inline 스타일
3. id 선택자 > class 선택자 > 요소 선택자 (h1~h6, p)
4. 우선순위 같을 때는 마지막에 선언한거
4. 만약에 우선순위가 같다면, 마지막에 나오는 선언이 사용된다
<style>
/* red는 버려짐 */
h1 {
color: red;
}
/* blue가 선택됨 */
h1 {
color: skyblue;
}
</style>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* red는 버려짐 */
h1 {
color: red;
}
/* blue가 선택됨 */
h1 {
color: skyblue;
}
</style>
</head>
<body>
<h1>This is Specificity</h1>
</body>
</html>'WEB > CSS_ concepts' 카테고리의 다른 글
| [CSS] CSS 상속 _ 일반적으로 text 관련은 상속됨/ 배치와 관련된 것 Box model, position은 안됨 (0) | 2024.03.10 |
|---|---|
| [CSS] 명시도 _ 선택자 우선순위 _ 퀴즈 (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 ★ 3. id 선택자 > class 선택자 > 요소 선택자 (h1~h6, p) (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 2. Inline 스타일 (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 1. ! important (0) | 2024.03.10 |