威言威语
我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 网络 > 正文

伪类选择器:nth-child()与:nth-of-type()的使用方法及区别

本文主要讨论伪类选择器 :nth-child()与:nth-of-type()的使用方法及区别,并引申:first-child的使用方法。

1. 简介
本文主要讨论伪类选择器 :nth-child()与:nth-of-type()的使用方法及区别,并引申:first-child的使用方法

2. :nth-child(n)和:nth-of-type()的使用方法及区别

2.1 定义

类别 定义
:nth-child(n) 匹配父级元素中的第n个子元素,子元素类型没有限制
p:nth-child(2) 匹配在父级中位于第二位的p元素。换言之,匹配父级的第二个子元素,且该子元素为p。
:nth-of-type(n) 匹配父级元素中的第n个特定类型子元素
p:nth-of-type(2) 匹配在父级p元素中的第二个元素。

2.2 用法
使用语法相同。n可以是一个数字、一个关键字(odd、even)或者一个公式(an+ b)

2.3 区别
:nth-child(n) 匹配时在父元素的所有子元素中匹配,不考虑子元素类型
:nth-of-type(n) 匹配时在父元素的特定子元素中匹配
具体区别见2.4

2.4 例子
(1) 一般情况下

<html>
    <head>
        <style>
            p:nth-child(2) {
                background: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>The 1 paragraph.</p>
        <p>The 2 paragraph.</p>
        <p>The 3 paragraph.</p>
        <p>The 4 paragraph.</p>
        <p>The 5 paragraph.</p>
        <p>The 6 paragraph.</p>
    </body>
</html>
<html>
    <head>
        <style>
            p:nth-of-type(2) {
                background: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>The 1 paragraph.</p>
        <p>The 2 paragraph.</p>
        <p>The 3 paragraph.</p>
        <p>The 4 paragraph.</p>
        <p>The 5 paragraph.</p>
        <p>The 6 paragraph.</p>
    </body>
</html>

(2) 子要素指的是直接子要素

<html>
    <head>
        <style>
            p:nth-of-type(1) {
                background: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>The 1 paragraph.</p>
        <p>The 2 paragraph.</p>
        <p>The 3 paragraph.</p>
        <div><p>The 3.1 paragraph.</p></div>
        <p>The 4 paragraph.</p>
        <p>The 5 paragraph.</p>
        <p>The 6 paragraph.</p>
    </body>
</html>

(3)使用类名选择器时,:nth-of-type(n)会按照标签类型分组; :nth-child(n)不会

<html>
<head>
<style> 
.item:nth-of-type(1)
{
  background:#ff0000;
}
</style>
</head>
<body>
        <h1>This is a heading</h1>
        <p class="item">The 1 paragraph.</p>
        <div class="item">The 2 paragraph.</div>
        <div class="item">The 3 paragraph.</div>
        <div class="item">The 4 paragraph.</div>
        <p class="item">The 5 paragraph.</p>
        <p class="item">The 6 paragraph.</p>
    </body>
</html>

3. :first-child 与 :nth-child(n)
p:first-child 与 p:nth-child(1) 效果一致,可以说:nth-child(n)是 :first-child的扩展版

本文固定链接: https://www.weisay.com/blog/nth-child-nth-of-type.html | 威言威语

您可能还会对这些文章感兴趣!

伪类选择器:nth-child()与:nth-of-type()的使用方法及区别:等您坐沙发呢!

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter