<!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>구조 선택자</title>
<style>
* {margin:0; padding:0;} /*박스의 여백을 초기화한다.*/
li {list-style:none; height:50px;}
li:first-child {background:orange;}
li:last-child {background:olive;}
li:nth-child(2) {background:orchid;}
li:nth-child(3) {background:orangered;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</body>
</html>
결과
