您的位置：首页 > 其它

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

2016-08-09 21:26 513 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航