SASS 中:nth-child 选择器的使用技巧
在 CSS 中，我们可以使用:nth-child(n)选择器来选择某一个父元素下的第 n 个子元素。该选择器非常常用，SASS 中也支持该选择器的使用。在这篇文章中，我们将就 SASS 中:nth-child 选择器的使用技巧进行详细讲解。
基本语法
使用 SASS 中的:nth-child 选择器，需要按照以下的语法：
&:nth-child(n) { style rules }其中，& 表示当前元素的父元素，:nth-child(n) 表示要选择的子元素，style rules 则是需要应用于该子元素的样式规则。例如，我们可以这样使用该选择器：
ul {
li {
&:nth-child(odd) { background-color: #eee; }
&:nth-child(even) { background-color: #fff; }
}
}这是一个非常基础的使用方法，通过 SASS 编译后，生成的 CSS 代码将如下：
ul li:nth-child(odd) { background-color: #eee; }
ul li:nth-child(even) { background-color: #fff; }此时，我们就可以实现隔行变色的效果。
高级技巧
SASS 中的:nth-child 选择器并不仅限于上述基础使用方法，我们还可以将其运用到更加复杂的场景中。下面，我们将就几个高级技巧进行详细讲解。
- 使用公式
有时候，我们需要选择某一个父元素下的第 n 个子元素，但 n 并不是一个固定的数字。例如，我们要选择表格的第 4 行、第 7 行、第 10 行等等，这些行并没有什么规律可言。此时，我们可以使用公式来计算出要选择的子元素。
假设需要选择表格的第 4 行、第 7 行和第 10 行，可以这样使用该选择器：
tr {
&:nth-child(3n+1) { background-color: #eee; }
}在这个例子中，3n+1 表示可以被 3 整除余 1 的数字，即 1、4、7、10 等等，因此可以选择表格的第 4 行、第 7 行和第 10 行。通过 SASS 编译后，生成的 CSS 代码将如下：
tr:nth-child(4) { background-color: #eee; }
tr:nth-child(7) { background-color: #eee; }
tr:nth-child(10) { background-color: #eee; }- 嵌套使用
SASS 的嵌套使用非常方便，我们可以将多个选择器嵌套在一起来表示层级关系。同样地，在 SASS 中，我们也可以将:nth-child 选择器嵌套在其他选择器中来进行选择。
例如，我们要实现一个效果，给表格的每一列都添加一个边框，但不包括表头。可以这样使用该选择器：
-- -------------------- ---- -------
----- -
-- -
------- -----
-
-- -
------- --- ----- -----
---------------- -
------------ -----
-
-
-在这个例子中，&:nth-child(n+2) 表示选择的是 td 的第 2 个及其之后的子元素，也就是表格的每一列。通过 SASS 编译后，生成的 CSS 代码将如下：
table th { border: none; }
table td { border: 1px solid #ccc; }
table td:nth-child(n+2) { border-left: none; }- 多个参数选择
在 CSS 中，我们可以使用多个参数来进行选择。例如，可以这样选择某一个元素的第 1 个子元素和第 2 个子元素：
div :nth-child(1), div :nth-child(2) { color: red; }这样选择的元素是该 div 元素下的第 1 个和第 2 个子元素，例如：
<div> <p>第一个子元素</p> <p>第二个子元素</p> <p>第三个子元素</p> </div>
但在 SASS 中，我们无法直接使用逗号分隔多个参数进行选择。如果我们要选择多个参数，需要使用 SASS 中的选择器插入嵌套语法，例如：
div {
&:nth-child(1), &:nth-child(2) { color: red; }
}在这个例子中，& 表示当前元素 div，&:nth-child(1), &:nth-child(2) 表示选择的是该 div 元素下的第 1 个和第 2 个子元素。通过 SASS 编译后，生成的 CSS 代码将如下：
div:nth-child(1), div:nth-child(2) { color: red; }总结
在 SASS 中，使用:nth-child 选择器非常的方便，可以帮助我们轻松地实现各种选择需求。本文从基础语法开始，详细讲解了三个高级技巧：使用公式、嵌套使用和多个参数选择。相信这些技巧可以帮助你更好地应对更加复杂的选择场景，并减少代码的冗余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f00982f6b2d6eab39fa783