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 1li>
            <li>Item 2li>
            <li>Item 3li>
            <li>Item 4li>
            <li>Item 5li>
            <li>Item 6li>
            <li>Item 7li>
        ul>
    body>

html>

总结:

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

 

你可能感兴趣的:(CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用)