CSS

구조선택자

은찡안찡 2022. 11. 16. 14:48
<!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>

 

 

결과

'CSS' 카테고리의 다른 글

박스속성(1)  (0) 2022.11.16
반응선택자  (0) 2022.11.16
형제선택자  (0) 2022.11.16
상태선택자  (0) 2022.11.16
자식+후손선택자  (0) 2022.11.16