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

William2009-04-21 02:42网络7,740次浏览抢沙发

扫一扫手机看

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的扩展版

赏