伪类选择器之结构选择器：：noth-child(n)/:nth-of-type(n)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 50px auto;
            width: 400px;
            list-style: none outside none;
        }
        li{
            display: inline-block;
            margin: 5px;
            padding: 5px;
            width: 50px;
            height: 50px;
            font:bold 30px/50px arial;
            background: #000;
            color: #fff;
            border-radius: 50px;
            text-align: center;
        }
        /*:first-child使用*/
        ul>li:first-child{
            background-color:green ;
        }
        ul>li:last-child{
            background-color: blue;
        }
        /*:nth-child 与：nth-of-type(n)之间的区别：在特定的区域中查找*/
        ul>li:nth-child(3){
            background-color: yellow;
        }
        ul>li:nth-child(2n){
            background-color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>
</body>
</html>