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

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>

回答

一步步:

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

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


以上是:nth-child伪类选择器在这里如何工作?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>