CSS伪级：基于其索引的样式元素
CSS 选择器：基于元素在文档子树中位置的伪类选择
核心要点
- CSS 提供了被称为子索引伪类的选择器，用于根据元素在文档子树中的位置匹配元素。这些包括
:first-child、:last-child、:only-child、:nth-child()和:nth-last-child()。 -
:nth-child()和:nth-last-child()伪类是函数式的，可以接受odd关键字、even关键字、整数或An B形式的参数，其中 A 是步长间隔，B 是偏移量，n 是正整数。 -
:only-child伪类如果元素是另一个元素的唯一子元素则匹配该元素。<code>:empty 伪类可以选择没有子元素的元素，甚至连空格也没有。 - CSS 提供了类型化的子索引伪类，它们根据索引值匹配元素，但仅限于特定类型的元素。这些包括
:first-of-type、:last-of-type、:only-of-type、:nth-of-type()和:nth-last-of-type()。
CSS 还提供选择器，用于根据元素在文档子树中的位置匹配元素。这些被称为子索引伪类，因为它们依赖于元素的位置或顺序，而不是它的类型、属性或 ID。共有五个：
:first-child:last-child:only-child:nth-child():nth-last-child()
:first-child 和 :last-child
正如您从名称中猜到的那样，:first-child 和 :last-child 伪类可以用来选择作为节点（元素）的第一个或最后一个子元素的元素。与其他伪类一样，当由简单选择器限定时，:first-child 和 :last-child 的副作用最少。
让我们看一下下面的 HTML 和 CSS：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>您可以看到它在下面的图中是什么样子。
因为 :first-child 没有限定，h2 元素和第一个 li 元素都是粉红色的。毕竟，h2 是 body 的第一个子元素，li 是 ul 元素的第一个子元素。但是为什么剩下的 li 元素是绿色的呢？那是因为 :last-child 也未限定，ul 是 body 的最后一个子元素。我们实际上键入了 *:first-child 和 *:last-child。
如果我们通过添加一个简单的选择器来限定 :first-child 和 :last-child，那么这一切就更有意义了。让我们将选择限制为列表项。将 :first-child 更改为 li:first-child，将 :last-child 更改为 li:last-child。下图显示了结果。
:nth-child() 和 :nth-last-child()
能够选择文档的第一个和最后一个子元素是很好的。但是，如果我们想选择奇数或偶数元素呢？也许我们想选择文档子树中的第六个元素，或者将样式应用于每三个元素。这就是 :nth-child() 和 :nth-last-child() 伪类发挥作用的地方。
与 :not() 一样，:nth-child() 和 :nth-last-child() 也是函数式伪类。它们接受一个参数，该参数应该是：
odd关键字even关键字- 一个整数，例如 2 或 8，或者
An B形式的参数，其中 A 是步长间隔，B 是偏移量，n 是表示正整数的变量。
最后一项有一定的复杂性。我们稍后再讨论它。
:nth-child() 和 :nth-last-child() 之间的区别是什么？起点：:nth-child() 向前计数，:nth-last-child() 向后计数。CSS 索引使用计数数字，从 1 开始而不是从 0 开始。
:nth-child() 和 :nth-last-child() 都可用于交替模式。创建斑马纹表格行颜色是完美的用例。下面的 CSS 为偶数编号的表格行提供了一个浅蓝灰色的背景，其结果可以在下图中看到：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
将 :nth-child 切换为 :nth-last-child 会反转此条带，因为计数从底部开始，如下所示。
如何尝试使用更复杂参数的一些复杂示例？我们将从下面显示的文档开始，该文档包含 20 个项目。
使用 :nth-child() 和 :nth-last-child()，我们可以选择特定位置的单个子元素。我们可以选择特定位置之后的所有子元素，或者我们可以通过倍数选择元素，并带有一个偏移量。让我们更改第六个项目的背景颜色：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>这给了我们下面的结果。
但是如果我们想选择每三个元素呢？这就是 An B 语法发挥作用的地方：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}同样，A 是步长间隔。它几乎就像 n 的乘数，n 从 1 开始。因此，如果 A = 3，则 3n 将匹配第 3、6、9 等元素。这正是发生的情况，正如您在下面看到的。
事情变得更有趣的地方来了。我们可以使用 :nth-child() 和 :nth-last-child() 来选择某个点之后的所有元素。让我们尝试选择除前七个元素之外的所有元素：
.item:nth-child(6) {
background: #e91e63;
}这里没有步长值。因此，n 8 匹配从第八个元素开始的每个元素 n，如下所示。
注意：负偏移量
负偏移量和范围值也是有效的。使用 :nth-child(-n 8) 将反转我们的选择，并匹配前八个元素。
我们还可以使用偏移量和步长值来选择每三个元素，从第五个开始：
.item:nth-child(3n) {
background: #e91e63;
}您可以在下图中看到此选择器的结果。
:only-child
如果元素是另一个元素的唯一子元素，则 :only-child 伪类匹配该元素。下面是两个无序列表。第一个有一个项目，而第二个包含三个：
.item:nth-child(n+8) {
background: #e91e63;
}使用 li:only-child{color: #9c27b0;} 将选择 Apple，因为它是我们第一个列表的唯一子元素。但是，第二个列表中的任何项目都不匹配，因为有三个同级元素。您可以看到它在下面的图中是什么样子。
<code>:empty
也可以使用 <code>:empty 伪类选择没有子元素的元素。当我们说 <code>:empty 时，我们的意思是空。为了使元素匹配 <code>:empty 伪类，它不能包含任何其他内容——甚至空格也不行。换句话说，<code><p></p><p> </p> 将匹配，但 <code>:empty :not() 将不匹配。有时，所见即所得 (WYSIWYG) 编辑器会将空 p 元素插入到您的内容中。您可以将 p:not(:empty) 与
。
通过其索引选择特定类型的元素p:nth-last-child(2)
选择每个作为其父元素的倒数第二个元素的 p 元素。
在本节中，我们将讨论类型化的子索引伪类。这些伪类也根据其索引值匹配元素；但是，匹配仅限于特定类型的元素。例如，选择第五个 p 元素，或者偶数索引的 h2 元素。
- 有五个这样的伪类，其名称与其非类型化对应物的名称相同：
-
:first-of-type :last-of-type:only-of-type:nth-of-type():nth-last-of-type()
p:nth-child(5)
p:nth-of-type(5)这些伪类与子索引伪类之间的区别是细微的。其中
匹配所有 p 元素，然后在这些元素中找到第五个 p 元素。
让我们从一个稍微不同的文档开始。它仍然有 20 个项目，但其中一些是 p 元素，一些是 div 元素。p 元素具有圆角，如下所示。
:first-of-type
:last-of-type使用 :only-type、
和 :first-of-type
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
这将匹配每个作为其父元素的第一个 p 元素的 p 元素，如下所示。
:last-of-type
伪类的作用类似，它匹配其父元素的最后一个此类元素，如下所示。但是，如果元素是其父元素的:only-of-type唯一
让我们再看一个使用 :first-of-type 的示例，但这次使用伪元素。还记得本章前面提到的 ::first-letter 伪元素吗？好吧，正如您所看到的，它为应用它的每个元素创建了一个初始大写字母。我们不妨更进一步，将这个初始大写字母限制在第一个段落中：
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>如下图所示，现在我们的段落将有一个初始大写字母，即使它前面有标题。
使用 :nth-of-type 和 :nth-last-of-type
:nth-of-type() 和 :nth-last-of-type() 也是函数式伪类。它们接受与 :nth-child() 和 :nth-last-child() 相同的参数。但与 :first-of-type 和 :last-of-type 一样，索引解析为相同类型的元素。例如，要选择第一个 p 元素和每个后续的 p 元素，我们可以将 odd 关键字与 :nth-of-type() 一起使用：
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}正如您从下图中看到的，这只会匹配奇数编号的 p 元素，而不是奇数编号的子元素。
类似地，使用 :nth-last-of-type(even) 选择偶数编号的 p 元素，但计数从文档中的最后一个 p 元素开始——在本例中是项目 18（如下所示）。
如果这仍然看起来很模糊，请使用 Paul Maloney 的 Nth-Test 工具，或查看 Nth Master 上的示例。这两个项目都是学习更多关于这些伪类的极好方法。
[5] 此 An B 语法在 CSS 语法模块级别 3 中进行了描述。
关于 CSS 伪类和基于索引的元素样式的常见问题解答
什么是 CSS 伪类？
CSS 伪类是添加到选择器中的关键字，用于指定所选元素的特殊状态。例如，:hover 可用于在用户的指针悬停在按钮上时更改按钮的颜色。伪类与类和 ID 一起，是一种在不更改 HTML 标记的情况下将样式应用于元素的方法。
:nth-child 伪类是如何工作的？
:nth-child 伪类根据元素在一组同级元素中的位置匹配元素。它使用类似函数的语法 :nth-child(an b)，其中“a”和“b”是整数值。“n”是从 0 开始的计数器，并且对于每个元素都会增加 1 的增量。“an b”表示要选择的元素，从第一个元素开始 (b=1)。
:nth-child 和 :nth-of-type 之间的区别是什么？
:nth-child 根据元素在其所有同级元素中的位置匹配元素，而 :nth-of-type 仅考虑相同类型同级元素中的位置。例如，p:nth-child(2) 如果它是 <code><p></p> 元素，则会选择第二个子元素，而 p:nth-of-type(2) 将选择第二个 <code><p></p> 元素，而不管它在其他同级元素中的位置如何。
如何使用给定的类名选择第一、第二或第三个元素？
您可以将 :nth-child 伪类与类选择器组合使用。例如，.myClass:nth-child(1) 将选择具有类“myClass”的第一个元素。请记住，只有当元素是其父元素的第一个子元素时，这才能工作。
我可以在 :nth-child 中使用负值吗？
不可以，:nth-child 不允许使用负值。您可以使用的最小值是 0，它不选择任何元素。
如何选择每个偶数或奇数元素？
您可以将“even”和“odd”关键字与 :nth-child 一起使用，以选择每个偶数或奇数元素。例如，:nth-child(even) 将选择从第一个元素开始的每个第二个元素。
我可以将 :nth-child 与其他伪类一起使用吗？
是的，您可以将 :nth-child 与其他伪类组合使用。例如，:nth-child(2):hover 将在用户的指针悬停在第二个子元素上时应用样式。
:nth-child 和 :nth-of-type 之间是否存在性能差异？
在大多数情况下，性能差异可以忽略不计。但是，在处理大量元素时，:nth-of-type 可能稍快一些，因为它只考虑相同类型的同级元素。
我可以将 :nth-child 与伪元素一起使用吗？
不可以，伪元素不能与 :nth-child 一起使用，因为它们不被认为是文档树的一部分。
:nth-child 是否存在浏览器兼容性问题？
所有现代浏览器都很好地支持 :nth-child。但是，Internet Explorer 8 或更早版本不支持它。对于这些浏览器，您可能需要使用 JavaScript 或 jQuery 来实现类似的效果。
所有图片均保持原格式和位置。
以上是CSS伪级：基于其索引的样式元素的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用HTML，CSS和JavaScript创建动画倒计时计时器
Apr 11, 2025 am 11:29 AM
您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多
为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？
Apr 05, 2025 pm 05:51 PM
关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...
如何通过CSS选择第一个类名为item的子元素？
Apr 05, 2025 pm 11:24 PM
在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时，常常会遇到元素个数不�...
