CSS2
<title>전체 선택자</title>
<style type="text/css">
*{color:#FA8072;}
.ctx{color:#40E0D0}
</style>
</head>
<body>
<h1>입고 신고 쓰고 착용하는 것들</h1>
<hr>
<ul>
<li>옷</li>
<li>신발</li>
<li>안경</li>
<li>장갑</li>
</ul>
<p class="ctx">발이 편한 신발과 눈이 편한 안경은 필수이다.</p>
</body>
<style type="text/css">
li>p{color:#FA8072}
ul>li>p>em{color:#C71585}
li>p>span{color:#9400D3}
</style>
</head>
<body>
<ul type="square">
<li><p>7월의<em>여행지</em></p></li>
<li><p>7월의<span>여행지</span></p></li>
<li><p>8월의 여행지</p></li>
<li>9월의 여행지</li>
</ul>
</body>
<title>인접</title>
<style type="text/css">
h1+h2{color:#6A5ACD }
h2+h3{color:#228B22 }
h1+h3{color: red} /* 인접이 아니므로 적용x */
#a+li{color:#8B0000 }
ul+p{color: rgb(100,150,200)} /* 0~255까지 십진수로 넣을 수 있다 */
ul+p{color: #ff2277} /* 16진수 */
ul+p{color: #f27} /* 두 숫자가 같을 때는 하나만 써도 됨 */
</style>
</head>
<body>
<h1>엑스포 안내</h1>
<h2>책자를 배부하고 있습니다.</h2>
<h3>안내 데스크를 활용하시기 바랍니다.</h3>
<hr>
<ul>
<li id="a">1번</li>
<li>2번</li>
</ul>
<p>3번</p>
<p>4번</p>
</body>
<title>문맥 자손 선택자</title>
<style type="text/css">
p em{font-size: 1.5em; color:lime} p에 속한 글자보다 1.5배 크게
h5 p{font-size: 10%; color: blue }
h5 span{color:#FF8C00;}
p span{color: orange}
h5 em{color: purple}
</style>
</head>
<body>
<p>
특정 상황에 한정된 선택자를 <em>문맥선택자</em>라고 하고, <br>
<em>태그 선택태그</em>와 같은 형식으로 사용함
</p>
<hr>
<h5>
부모와 자식태그를 활용해서
<p>스타일을 <span>적용</span>하는 것이 문맥선택자이다.</p>
<em>태그 선택태그</em>와 같은 형식으로 사용함
</h5>
</body>
<title>selector practice</title>
</head>
<body>
<div id="container">
<h1>건강해지는 <span>차</span></h1>
<p>머리와 <span>피부</span>에 <span>좋은</span>차는 어떤 차일까요?</p><br><br>
<em>차의 종류</em>에 대해 알아보도록 합시다.<p></p><br><br>
<ul>
<li class="bamboo">
<h4>대나무차 <span>15,000원</span></h4>
<p>얼굴에 물을 주는 <span>효과</span>가 있다.</p><br>
</li>
<li class="persimmon">
<h4>감잎차 <span>13,000원</span></h4>
<p>빈혈이 있는 사람에게 효과가 있다.</p><br>
</li>
<li class="cassiaseet">
<h4>결명자차 <span>20,000원</span></h4>
<p>눈을 밝혀 주는 효과가 있다.</p>
<p>보리차와 비슷하나, 맛이 더 은은하고 구수하며 불그스름하다.</p>
</li>
</ul>
</div>
</body>