nth-of-type

最新推荐文章于 2025-03-21 21:08:02 发布

weixin_33912453

最新推荐文章于 2025-03-21 21:08:02 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rachelch/p/9585140.html

nth-of-type：按照类型来选择，碰到一个同类型就加1

如下，为第五个.win设置样式

首先，先找到同类型（div）的第五个元素，再看class是否为win

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .win:nth-of-type(5){
                color: red;
            }
        </style>
    </head>
    <body>
        <div>111111111</div>
        <div class="win">222222</div>
        <div>33333</div>
        <div>444444444</div>
        <div class="win">555555</div>
        <div>6666666</div>
        <div>77777777</div>
        <div class="win">88888888</div>
    </body>
</html>

如下，为第三个.win设置样式。

首先，先找到同类型（div）的第三个元素，再看class是否为win

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .win:nth-of-type(3){
                color: red;
            }
        </style>
    </head>
    <body>
        <div>111111111</div>
        <div class="win">222222</div>
        <p>33333</p>
        <p>444444444</p>
        <div class="win">555555</div>
        <div>6666666</div>
        <div>77777777</div>
        <div class="win">88888888</div>
    </body>
</html>

【注意】不同类型会被当作多类，只要符合选择器规范都会选中

【注意】nth-of-type 按照类型来计算，如果是class那么碰到不同类型的，单独一类，符合条件的选中。

如下，将.win的第二个元素设置样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .win:nth-of-type(2){
                color: red;
            }
        </style>
    </head>
    <body>
        <div>111111111</div>
        <div class="win">222222</div>
        <p class="win">33333</p>
        <p class="win">444444444</p>
        <div class="win">555555</div>
        <div>6666666</div>
        <div>77777777</div>
        <div class="win">88888888</div>
    </body>
</html>