CSS 选择器 :nth-of-type()

概述

:nth-of-type() 是一个 CSS 伪类选择器，它允许开发者基于元素在其父元素中的类型位置来选择元素。这意味着该选择器不仅关注元素的类型（例如，<div>、<p> 等），还考虑其在相同类型元素中的位置。

使用场景

:nth-of-type() 通常用于需要根据元素在父元素中的位置进行样式化的场景。比如，你可以使用它来改变列表中某些项目的样式，或者为表格中的特定行设置样式。

基本语法

:nth-of-type(an+b)

其中：

• a 和 b 是整数。
• n 是一个从 0 开始计数的变量。

示例

假设有一个 HTML 结构如下：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <span>这是 span</span>
    <p>第四段</p>
</div>

如果你想选择第二个 <p> 元素，可以使用以下 CSS：

p:nth-of-type(2) {
    color: red;
}

这将使第二个 <p> 元素的文字变为红色。

复杂的匹配

除了简单的 an+b 形式，:nth-of-type() 还支持更复杂的匹配方式，包括奇数和偶数的选择：

• odd：选择所有奇数位置的元素。
• even：选择所有偶数位置的元素。

示例：

// www.javascriptcn.com code example
/* 选择所有奇数位置的 <p> 元素 */
p:nth-of-type(odd) {
    background-color: lightblue;
}

/* 选择所有偶数位置的 <p> 元素 */
p:nth-of-type(even) {
    background-color: lightgreen;
}

特殊情况

当元素之间有其他不同类型的元素时，:nth-of-type() 只会选择与指定类型相同的元素。例如，在上述例子中，如果插入了一个 <span> 元素，<p> 元素的位置可能会发生变化。

<div>
    <p>第一段</p>
    <span>这是 span</span>
    <p>第二段</p>
    <p>第三段</p>
</div>

在这种情况下，第一个 <p> 元素仍然是第一个 <p> 元素，而第二个 <p> 元素变成了第三个 <p> 元素。

实际应用案例

案例一：交替行颜色

在表格或列表中，经常需要对行或项目进行交替着色，以提高可读性。可以使用 :nth-of-type() 来实现这一点。

tr:nth-of-type(odd) {
    background-color: #f2f2f2;
}
tr:nth-of-type(even) {
    background-color: #ffffff;
}

案例二：突出显示特定项目

当你需要强调列表中的某个项目时，可以使用 :nth-of-type() 来选择特定位置的元素并为其添加特殊样式。

li:nth-of-type(3) {
    font-weight: bold;
    color: red;
}

总结

:nth-of-type() 选择器是一个非常强大的工具，可以帮助你在复杂的页面结构中精确地选择和样式化元素。通过理解其工作原理及其各种形式，你可以创建出更灵活和更具动态效果的用户界面。