CSS中的nth-child和nth-of-type选择器

最新推荐文章于 2023-02-23 17:00:36 发布

osbron_J

最新推荐文章于 2023-02-23 17:00:36 发布

阅读量819

点赞数

分类专栏： web前端文章标签： nth-child

本文链接：https://blog.csdn.net/osbron_J/article/details/103007910

版权

本文详细介绍了CSS中的nth-child和nth-of-type选择器，包括它们的用法和区别。 nth-child选择器用于选取同级元素中的特定元素，而nth-of-type则仅针对同类型元素进行选择。文章通过实例解释了‘an+b’表达式的含义，并展示了如何选择第一个、前几个、偶数位置以及根据特定模式选择元素。同时，还对比了nth-last-child和nth-last-of-type的选择器，它们的计数方向是从后向前。

摘要由CSDN通过智能技术生成

CSS中的nth-child和nth-type-of选择器

先写一个例子

<head>
    <style>
        *{
    
            margin: 0px;
            padding: 0px;
        }
        .item{
    
            vertical-align: top;
            border: 1px solid black;
            height: 200px;
            width: 200px;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
        <div class="item">