打赏

CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用

以下示例主要讲解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>

总结：

除了first-child选择器兼容IE7+以上外，其他选择器均需要IE9以上浏览器才能兼容。

 

posted @ 2017-07-14 17:02  孟繁贵  阅读(746)  评论(0)  编辑  收藏  举报
TOP