HTML5+CSS3学习笔记（八）伪类选择器first-child、first-of-type、nth-child(n)的区别

HTML5+CSS3学习笔记（八）

本系列更多文章，可以查看专栏 HTML+CSS学习笔记

---

---

1. :first-child

li:first-child : 用于选中所有元素的第一个子元素，且第一个子元素必须为 <li>

注：此伪类选择器后面不带()

li:first-child {
	color: red;
}

<div>
	<ol>
		<span>test1</span>
		<li>
			A
			<p>test2</p>
		</li>
		<li>B</li>
		<li>C</li>
	</ol>
</div>

运行结果如下图所示（均为black）

• 误区1： 误以为选中的是 <li> 标签的第一个子元素！（错误地 认为上图中会是test2为红色）
• 误区2： 误以为选中的是所有元素中，第一个<li> 子元素 ！（错误地 认为上图中A test2为红色）

---

2. :first-of-type

li:first-of-type ： 用于选中所有元素子元素中，第一个 <li> 标签

注：此伪类选择器后面不带()

li:first-of-type {
	color: red;
}

<div>
	<ol>
		<span>test1</span>
		<li>
			A
			<p>test2</p>
		</li>
		<li>B</li>
		<li>C</li>
	</ol>
</div>

运行结果如下图所示（test2和A为红色）

---

3. :nth-child(n)

li:nth-child(n) 用于选中所有元素子元素中，第n个 <li> ， <li>标签可以换成其它（即选中的li必须是某个元素的第一个子元素）

注：1. 此伪类选择器()内的n，可以为关键词odd（奇数）、even（偶数）；可以为数字；可以为公式
2. 只有括号内的n大于零，且为整数时才生效

<div>
	<ol>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
	</ol>
</div>

情况（一）： n为数字

/* 数字（整数），最小数字为1，并非0 */
li:nth-child(5) {
	color: red;
}

运行结果如下图所示

注：数字只能大于等于1，且为整数，图上li的父元素 ol 有5个 li，故n有效数字为1-5

---

情况（二）： 使用表达式

/* 表达式 1 */
li:nth-child(-n + 3) {
	color: blue;
}

运行结果如下图所示

/* 表达式 2 */
li:nth-child(n + 4) {
	color: palevioletred;
}

运行结果如下图所示

注：-n+3 表示选中从第1个到第3个子元素； n+4 表示选中从第4个到最后一个子元素

---

结尾

如有错误，欢迎评论区指正。