728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식선택자</title>
<style>
span{
color: red;
}
/* 후손 선택자: {부모선택자} {자식선택자} -> 부모 안에 있는 자식을 전부 선택함 */
body span {
font-style: italic;
}
/* 자식 선택자: {부모 선택자} > {자식 선택자} -> 부모 요소 바로 아래에있느 자식 요소를 선택 */
body > span {
color: chartreuse;
}
/* */
test, div {
color: chartreuse!important;
}
</style>
</head>
<body>
<span>ONE</span>
<span>ONE BY ONE</span>
<div>
<span>TWO</span>
<div>
<test>TEST</test>
<span>Three</span>
<span class="f">Four</span>
<span id="five">Five</span>
</div>
</div>
</body>
</html>728x90
반응형