nth-child 与 nth-of-type

weixin_65874102

已于 2022-11-10 22:14:12 修改

阅读量422

点赞数 1

分类专栏： HTML+CSS 文章标签：前端 html css

于 2022-11-10 07:11:27 首次发布

本文链接：https://blog.csdn.net/weixin_65874102/article/details/127781598

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细解析了CSS选择器:nth-child和:nth-of-type的区别与用法。通过实例说明了在不同场景下如何选择使用它们，特别是当元素嵌套复杂时，如何正确匹配元素。 nth-child是先排序后匹配，而nth-of-type是先匹配后排序。了解这两个选择器的工作原理对于精准地控制页面布局和样式至关重要。

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

nth-child 与 nth-of-type

他们两个的作用都是从处于同一父元素下的同级元素中选中指定位置的元素，当这些子元素相同时，二者用起来没区别。但是

在以下情况使用就需要区别

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- 想要匹配这个 -->
</section>

p:nth-child(1) 会找不到匹配的元素

但 p:nth-of-type(1) 会正确找到 <p>Little</p>

原因是：

nth-child是先排序后匹配：先不区分的对所有同级兄弟元素排序，（注意是同级元素）（排序是从1开始）找到第n个之后再看是否匹配；

而nth-of-type是先匹配后排序：只对匹配的同级兄弟元素排序，再从中找到第n个。

他们的语法几乎没有差别

目标元素选择器：nth-child(N)

目标元素选择器：nth-of-type(N)

其中

目标元素选择器可以是复合选择器
N代表选中第几个元素：可以是数字、关键字(odd奇/even偶)、公式an+b

对公式an+b的个人理解：

b是初始值，表示从第b个开始

an是步长，n代表每次+1，-n代表每次-1，3n代表+3

图片引自用户@weixin_65874102

li:nth-child(5) {
    color: green;   
}

图片引自用户@weixin_65874102

li:nth-child(n+6) { 
    color: green;   
}

图片引自用户@weixin_65874102

li:nth-child(-n+5) {
    color: green;   
}

图片引自用户@weixin_65874102

li:nth-child(4n+1) {
    color: green;   
}

一个例子理解何为同一父元素下的同级元素

看一个nth-child的看似复杂的例子：

<nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#"></a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#"></a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#"></a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
            <div class="nav-items">
                <a href="#">abc</a>
                <a href="#">abc</a>
            </div>
        </div>
    </nav>

实现的效果：

css部分大量用结构伪类设置样式（只展示了想描述的问题相关的样式设置）
在这里插入图片描述

/* 添加灰色框线 */
/* .nav-items a 要作为整体来看 */
.nav-items a:nth-child(1) {
  border-bottom: 1px solid #ccc;
}
.nav-items:nth-child(n+2) {
  border-left: 1px solid #ccc;
}

/* 背景图 */
.nav-items:nth-child(1) a{
  /* 巧妙利用了层叠 border-bottom: 1px solid #ccc;*/
  border: 0;

  background: url(../images/hotel.png) no-repeat bottom center;
  background-size: 121px auto;
}