<!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>
/*
계층선택자 -> 태그에 아이디, 클래스같은 구분자가 없는 경우에 포함관계를 가지고 구별하는 선택자
1) 부모 자식 관계 -> 특정 태그가 다른 태그를 포함한 경우
- 자식선택자(출발지 > 목적지) -> 내가 다른 태그 바로 밑에 포함된 경우
- 자식선택자를 사용할 때, 부모가 중복되는 경우에는 그 위쪽에 있는 부모도 사용 가능
- 자손선택자(출발지 목적지) -> 내 밑에 있는 모든 태그
2) 형제 관계 -> 서로 포함하고 있지 않지만, 부모가 같은 태그
- 인접형제, 후행형제
- 인접형제 -> 나를 기준으로 내 바로 다음 형제
- 후행형제 -> 나를 기준으로 내 뒤에 있는 모든 형제
*/
ul > li{
color: red;
}
ol > li{
color: blue;
}
li > span{
color: pink;
}
ul > li > span{
color: yellow;
}
h1 + p + p{
color: purple;
}
</style>
</head>
<body>
<h1>여긴 H1태그</h1>
<p>여긴 P태그1</p>
<p>여긴 P태그2</p>
<ul>
<li>li태그1</li>
<li>li태그2</li>
<li>
<span>span태그입니다.</span>
</li>
</ul>
<ol>
<li>li태그3</li>
<li>li태그4</li>
<li>
<span>span태그입니다.</span>
</li>
</ol>
</body>
</html>
개발자