<!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>
<style>
/*
- 하나의 요소에 동일한 속성이 여러개 있다면 우선 순위에 따라 적용되는 부분이 달라짐
- *(전체선택자)는 0점으로 계산
- 태그 1개당 1점, 클래스 1개당 10점, 아이디당 100점으로 계산 후,
점수가 높은 곳의 속성값을 적용
- 단, 값이 같으면 위치상 아래 위치한 코드가 실행
- !important는 우선순위를 무시하고 무조건 적용, 꼭 필요한 경우만 사용
- 요소들은 부모 요소에게 속성들을 상속을 받음
*/
body{
color:tomato;
}
.box{
font-size: 50px;
}
div{ /*태그 당이라고 표현=> body div라고 할땐 2점이 됨. 조상이나 부모태그 또한 점수 계산*/
font-size: 10px !important; /* !important를 사용해서 10px로 변경됨*/
}
.box1{
font-size: 200px; /*.box랑 점수값이 같지만 위치상 아래 있으니까 200px로 바뀜*/
}
</style>
</head>
<body>
<div class="box box1">안녕</div>
<a href="a">안녕</a> <!-- 모든 요소는 상속을 받지만 a태그는 글자 색지정이 자체적으로 되어있기때문에 색이 바뀌지 않고 본인 설정 색을 입힘-->
</body>
</html>
