<!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>Document</title>
<style>
/* 계층선택자 : 특정 위치의 요소를 계층적 구조로 선택 */
/* 1. 자손선택자 활용 span 글씨색 변경 */
div span {
color: salmon;
}
/* 2. 자손선택자 활용 li 글씨색 변경 */
div li {
color: goldenrod;
}
/* 3. 자식선택자 활용 span 글씨색 변경 */
ul>span {
color: forestgreen;
}
/* 4. 근접후행선택자 활용 li 글씨색 변경 */
.firstli+li {
color: purple;
}
/* 5. 후행선택자 활용 li 글씨색 변경 */
.firstli~li {
color: maroon;
}
/* 그룹선택자 => ,로 표시 */
h3, p, .groupbul li {
color: slateblue;
}
p, .groupbul li {
background-color: beige;
}
</style>
</head>
<body>
<div>
<strong>교육생 수칙</strong>
<ul>
<li class="firstli">지각하지 않기</li>
<li>결석하지 않기</li>
<span>매일매일 꾸준히</span>
<li>복습하기</li>
</ul>
</div>
<div>
<h3>6강의장</h3>
<p>녹화 꼭 해주세요</p>
<ul class="groupbul">
<li>오전 : 양세영</li>
<li>오후 : 김은영</li>
</ul>
</div>
</body>
</html>
댓글