:nth-last-child() Selector using CSS

在 CSS 中，元素是根据它们在其同级元素集合中的位置来匹配的，从末尾开始计数，并使用 :nth-last-child() 选择器。

语法

以下语法用于获取最后一个子元素并应用 CSS 属性。

• 其中 number 是输入： 数字从末尾开始计数，表示匹配组件的模式。它可以写成函数式表示法、奇数或偶数。
• 奇数： 从末尾开始计数，表示序列中位置为奇数的元素，例如 1、3、5 等。
• 偶数： 从末尾开始计数，表示序列中位置为偶数的元素：2、4、6 等。
• 函数式表示法 ()： 它为 n 的每个正整数或零值显示元素，其同级位置符合 An+B 的模式。

示例

示例展示了 :nth-last-child() 选择器在设计中的应用，以及奇数和偶数标签。

示例 1

示例展示了 :nth-last-child() 选择器在设计中带有奇数值标签的应用。

输出

示例 2

示例展示了 :nth-last-child() 选择器在设计中带有偶数值标签的应用。

输出

示例 3

示例展示了 :nth-last-child() 选择器在设计中带有奇数和偶数值标签的应用。

输出

示例 4

示例展示了 :nth-last-child() 选择器在设计中带有奇数和偶数值标签的应用。我们可以对表格的 <tr> 标签使用奇数和偶数公式，并应用不同的样式属性。

输出

示例 5

示例展示了 :nth-last-child() 选择器在设计中带有所需标签编号的应用。<tr> 标签用于使用多个输入属性为特定行应用 CSS 属性。

输出

示例 6

示例展示了 :nth-last-child() 选择器在设计中带有奇偶属性的应用。在这里，我们可以将 odd 或 even 关键字作为输入，并通过 style 标签应用 CSS 属性。

输出

示例 7

示例展示了 :nth-last-child() 选择器在设计中带有奇偶公式属性的应用。公式为 (an + b)。在此示例中，a 代表周期大小，n 代表计数器（从 0 开始），b 代表偏移量。在这里，从最后一个子元素开始，我们为索引是 3 的倍数的每个 tr 元素指定背景颜色。

输出

支持的浏览器

CSS 中的 :nth-last-child() 选择器支持以下浏览器及其版本：

• Apple Safari 3.1
• Google Chrome 4.0
• Edge 12.0
• Firefox 3.5
• Opera 9.0

结论

:nth-last-child() 选择器可将不同的 CSS 属性应用于相同类型的选择器或标签。要获取正确的标签，我们可以使用公式、数字或奇偶关键字。