SCSS，作为Sass的一种语法版本，是一种强大的CSS预处理器，它引入了许多便利的功能来增强CSS的编写能力。其中，:nth-child, :only-child, :first-child, :last-child, 和 :nth-last-child 是CSS选择器中的结构化伪类，它们允许开发者根据元素在父元素中的位置来精确地选择并应用样式。下面，我们将详细探讨这些选择器的用法，并通过具体示例来说明它们之间的区别。

:first-child

说明

选择每个父元素的第一个子元素。

示例

li:first-child {color: red;
}

此例中，所有<ul>或<ol>的第一个<li>元素文本颜色将变为红色。

:last-child

说明

选择每个父元素的最后一个子元素。

示例

li:last-child {font-weight: bold;
}

这段代码会让每个列表的最后一个<li>元素的文本加粗。

:nth-child(n)

说明

这是一个强大且灵活的选择器，能够根据位置索引来选择元素，其中n可以是数字、关键词（如even或odd）或公式（如2n+1）。

示例

• li:nth-child(1)：选择所有列表的第一项。
• li:nth-child(2n)：选择所有偶数位置的列表项。
• li:nth-child(2n+1)：选择所有奇数位置的列表项。

li:nth-child(2n) {background-color: lightblue;
}

这会使得所有偶数位置的<li>元素背景色为浅蓝色。

:only-child

说明

专门选择那些没有同级元素的单一子元素。

示例

p:only-child {text-align: center;
}

如果一个段落<p>是其父元素的唯一子元素，其文本将会居中对齐。

:nth-last-child(n)

说明

类似于:nth-child，但它是从最后一个子元素开始反向计数。

示例

• li:nth-last-child(1)：选择所有列表的最后一项。
• li:nth-last-child(2n)：从列表末尾开始，选择偶数位置的元素。

li:nth-last-child(odd) {border-bottom: 1px solid black;
}

这段代码会给从列表底部开始的每一个奇数位置的<li>元素添加底部边框。

总结

:first-child和:last-child直接定位到列表的首尾，:nth-child和:nth-last-child则提供了更灵活的定位方式，允许基于复杂的位置逻辑来选择元素，而:only-child专门用于没有兄弟元素的单一子元素。在SCSS开发中，熟练运用这些选择器能极大地提升样式设计的灵活性和精准度。