：nth-child(n)与：nth-of-type(n)的区别

最新推荐文章于 2022-04-25 11:23:25 发布

原创最新推荐文章于 2022-04-25 11:23:25 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

html-css 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了CSS中的p:nth-child(n)和p:nth-of-type(n)选择器的使用方法及区别。前者强调元素的位置和类型，后者则专注于相同类型的元素计数，通过具体示例帮助读者更好地理解这两种选择器的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用p:nth-child(n)得满足两个条件
1. 它的位置必须在它父元素的第n个，从1开始计数
2. 它必须是P元素（相对于p:nth-child(n)来举例）
使用p:nth-of-type(n)
- 只要它是第n个P元素就行了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            p:nth-child(6){color:red;}
            /*p的父元素的第n个元素且为p*/
            h2:nth-of-type(3){color:green;}
            /*不算别的元素，h2的父元素的子元素h2集合中的第n个*/
        </style>
    </head>
    <body>
    <div class="main">
        <h2>1</h2>
        <h2>2</h2>
        <p>8</p>
        <h2>3</h2>
        <h2>4</h2>
        <p>6</p>
        <h2>5</h2>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>

    </body>
</html>