未登录
登 录
×
<返回上一级
CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
CSSnth-childfirst-childlast-childnth-of-typefirst-of-typelast-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以上浏览器才能兼容