스타일 우선순위 결정
같은 요소가 여러 스타일 선언의 대상이 될 경우 어떤 선언의 속성을 우선 적용할지 결정하는 방법
- !important가 적용된 선언 방식이 모든 방식보다 우선된다.
- 명시도 점수: 명시도(중요도) 점수가 높은 선언이 우선된다.
- 선언 순서: 명시도 점수가 같은 경우, 가장 마지막에 작성된 선언이 우선된다.
- 명시도는 "상속(부모 스타일이 자식 스타일로 적용되는 것)" 규칙보다 우선된다.
우선순위 "중요도", "명시도", "선언순서"의 개념
우선순위에는 "중요도", "명시도", "선언순서"의 개념이 있다.
1. 가장 중요(!important): 모든 선언을 무시하고 가장 우선된다. 점수: 무한대
2. 인라인(inline): 1000점
3. 아이디(id selector) 점수: 100점
4. 클래스(class selector) 점수: 10점
5. 태그(tag(type) selector) 점수: 1점
6. 전체(universal selector) 점수: 0점
7. 상속(css inheritance) 점수: 계산하지 않음
점수 계산 연습
.list li.item => .class tag.class => 21
.list li:hover => .class tag.가상class => 21
.box::before => .class::가상요소(tag) => 11
#submit span => #id tag => 101
header .menu li:nth-child(2) => tag .class tag:가상class => 22
h1 => tag => 1
:not(.box) => 가상class(.class) => 10
:not(span) => 가상class(tag) => 1
※: hover와 같은 가상 클래스는 클래스 선택자의 점수(10)를 가지며, ::before와 같은 가상 요소는 태그
선택자의 점수(1)를 가진다.
※: 부정 선택자(:not)는 점수를 가지지 않는다.
<!--우선순위-->
<!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>우선순위</title>
<!--
스타일 우선순위 결정
같은 요소가 여러 스타일 선언의 대상이 될 경우 어떤 선언의 속성을 우선 적용할지 결정하는 방법
1. !important가 적용된 선언 방식이 모든 방식보다 우선된다.
2. 명시도 점수: 명시도(중요도) 점수가 높은 선언이 우선된다.
3. 선언 순서: 명시도 점수가 같은 경우, 가장 마지막에 작성된 선언이 우선된다.
4. 명시도는 "상속(부모 스타일이 자식 스타일로 적용되는 것)" 규칙보다 우선된다.
우선순위에는 "중요도", "명시도", "선언순서"의 개념이 있다.
1. 가장 중요(!important): 모든 선언을 무시하고 가장 우선된다. 점수: 무한대
2. 인라인(inline): 1000점
3. 아이디(id selector) 점수: 100점
4. 클래스(class selector) 점수: 10점
5. 태그(tag(type) selector) 점수: 1점
6. 전체(universal selector) 점수: 0점
7. 상속(css inheritance) 점수: 계산하지 않음
점수 계산 연습
.list li.item => .class tag.class => 21
.list li:hover => .class tag.가상class => 21
.box::before => .class::가상요소(tag) => 11
#submit span => #id tag => 101
header .menu li:nth-child(2) => tag .class tag:가상class => 22
h1 => tag => 1
:not(.box) => 가상class(.class) => 10
:not(span) => 가상class(tag) => 1
※: hover와 같은 가상 클래스는 클래스 선택자의 점수(10)를 가지며, ::before와 같은 가상 요소는 태그
선택자의 점수(1)를 가진다.
※: 부정 선택자(:not)는 점수를 가지지 않는다.
-->
<style>
div{ /*!important : 가장 우선적으로 적용*/
color: yellowgreen !important;
font-weight: bold;
font-size: 20px;
}
#color_yellow{ /*!important 로 인해 적용되지 않음*/
color: yellow;
}
.color_green{ /*!important 로 인해 적용되지 않음*/
color: hotpink;
}
*{ /*!important 로 인해 적용되지 않음*/
color: tomato;
}
</style>
</head>
<body>
<div id="color_yellow" class="color_green" style="color: blue;"> Hello world!!!</div>
</body>
</html>