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

最新推荐文章于 2022-07-04 17:37:52 发布

UNDERCOVERj

最新推荐文章于 2022-07-04 17:37:52 发布

阅读量402

点赞数 1

分类专栏： html-css 文章标签： css

本文链接：https://blog.csdn.net/github_37037281/article/details/55506767

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

使用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>

注释是我理解的通俗意义

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

UNDERCOVERj

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
：nth-child(n)与：nth-of-type(n)的区别

使用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">
复制链接

扫一扫