首页 > > 网页制作 > css >

CSS nth-child、first-child、last-child、nth-o…

2018-06-24 01:37:50来源：未知阅读 ()

以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>CSS 高级选择器使用</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            /*IE8不支持 IE9支持*/
            
            li:nth-child(3n+1) {
                color: red;
            }
            /*IE7+以上浏览器均支持*/
            
            li:first-child {
                color: blue;
            }
            /*IE8不支持 IE9以上支持*/
            
            li:last-child {
                color: green;
            }
            /*IE8不支持 IE9以上支持*/
            
            li:nth-of-type(odd) {
                color: #8D8D8D;
            }
            /*IE8不支持 IE9以上支持*/
            
            li:first-of-type {
                color: #92B8B1;
            }
            /*IE8不支持 IE9以上支持*/
            
            li:last-of-type {
                color: #2E2D3C;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
        </ul>
    </body>

</html>