Developer/Css
[css] CSS 다중 선택
Jeremy.Park
2014. 6. 16. 10:15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- CSS 다중 선택
1. , 연산자: 여러개 선택
2. 공백 연산자: 자손들
3. > 연산자: 자식들
-->
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<title> CSS002</title >
<style type="text/css" >
/* , 연산자 */
#header01, #header03, #header05 {
color: red;
}
/* 공백 연산자: 자손 중에 선택 */
#d1 p {
background-color: lime;
}
/* > 연산자: 직계 자식 중에 선택 */
#d2 > p {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="d1" >
<div id="d11" >
<h1 id="header01" class= "c1 c2">테스트1 </h1>
<p class="c1 c2" >테스트...01</ p>
<h1 id="header02" >테스트2</ h1>
<p> 테스트...02</p >
</div>
<div id="d12" >
<h1 id="header03" class= "c2">테스트3 </h1>
<p class="c2" >테스트...03</ p>
<h1 id="header04" >테스트4</ h1>
<p> 테스트...04</p >
</div>
</div>
<div id="d2" >
<h1 id="header05" class= "c1">테스트5 </h1>
<p class="c1" >테스트...05</ p>
<h1 id="header06" >테스트6</ h1>
<p> 테스트...06</p >
<div id="d21" >
<h1> 테스트7</h1 >
<p> 오호라~~07</p >
</div>
</div>
</body>
</html>