계층 선택자를 이용해서 해당 결과에 스타일 적용
1. div를 기준으로 자손선택자인 span태그의 색상을 tomato
2. div를 기준으로 자손선택자인 li태그의 색상을 blue
3. ol을 기준으로 자식선택자인 span태그의 색상을 red
4. li를 기준으로 근접 후행 선택자인 li태그의 색상을 green
5. li를 기준으로 후행선택자인 li태그의 색상을 pink
실습 스크립트
<style>
/* 계층 선택자를 이용해서 해당 결과에 스타일 적용*/
/* 1. div를 기준으로 자손선택자인 span태그의 색상을 tomato
2. div를 기준으로 자손선택자인 li태그의 색상을 blue
3. ol을 기준으로 자식선택자인 span태그의 색상을 red
4. li를 기준으로 근접 후행 선택자인 li태그의 색상을 green
5. li를 기준으로 후행선택자인 li태그의 색상을 pink
*/
div span{
color: tomato;
}
div li{
color: blue;
}
ol>span{
color: red;
}
li+li{
color: green;
}
li:nth-child(2)~li{
color : pink;
}
</style>
. . .
<body>
<div>
<strong>연수생 수칙</strong>
<ol>
<li>지각하지 않기</li>
<li>결석하지 않기</li>
<span>(불가피할 땐 꼭 담당연구원에게 미리 말하기)</span>
<li>복습하기</li>
</ol>
</div>
</body>
</html>
※실행결과
실습 해설
1. div를 기준으로 자손선택자인 span태그의 색상을 tomato
div span{
color: tomato;
}
->div의 자손 선택자 span 경로
2. div를 기준으로 자손선택자인 li태그의 색상을 blue
div li{
color: blue;
}
->div의 자손 선택자 li 경로
3. ol을 기준으로 자식선택자인 span태그의 색상을 red
ol>span{
color: red;
}
->ol의 자손 선택자 span 경로
4. li를 기준으로 근접 후행 선택자인 li태그의 색상을 green
li+li{
color: green;
}
5. li를 기준으로 후행선택자인 li태그의 색상을 pink
li:nth-child(2)~li{
color : pink;
}
+)li ~ li : 의 경우,
댓글
댓글 쓰기