第七天 结构伪类选择器(一)

149 阅读1分钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li:first-child{
            color:pink;}
         li:last-child{
             color:purple;
         } 
          li:nth-child(4){ /*选择第四个孩子 n代表第几个的意思 */
            color:skyblue  }
    </style>
    <body>
            <ul>
                <li>第一个孩子</li>
                <li>第二个孩子</li>
                <li>第三个孩子</li>
                <li>第四个孩子</li>
                <li>第五个孩子</li>
                <li>第六个孩子</li>
                <li>第七个孩子</li>
            </ul>
        </body>

</html>