:nth-child 伪类选择器在这里如何工作？

Question

div:nth-child(n+2):nth-child(odd):nth-child(-n+9) {
  background-color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>

我不明白为什么div选择了某些选择为红色的 s。我们可以一步一步地解释吗？我非常了解一个nth-child是如何工作的——但当它们相互结合时就不行了。

例如，为什么不从 (0 + 2) 中选择第二个 div？

Answer 1

一步步：

1. n+2 你选择第二个和第二个之后的每个元素
2. 奇数你从以前选择的奇数中选择
3. -n+9 从先前选择的元素中选择第九个和之前的每个元素

结论：您已经选择了第二个和第九个之间的每个奇数元素，包括它们。这意味着您没有选择第二个，因为 2 不是奇数。