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的扩展版
伪类选择器:nth-child()与:nth-of-type()的使用方法及区别：等您坐沙发呢！