在一个选择中使用:nth-​​child和:nth-​​last-child

时间:2018-11-27 15:26:43

标签: html css

我希望使用div's:nth-child()选择一些:nth-last-child()

但我无法超越:

首先,我选择执行此操作的所有div's.align div:nth-child(n),此后我不希望选择所有div's,因此我使用:nth-child(odd),最后 我有2个div's我不想选择,所以我使用:nth-last-child(2)来过滤掉它们。

完整代码如下:

.align div:nth-child(n):nth-child(odd):nth-last-child(2){
    //some css here
}

现在,此代码只能选择:nth-last-child(2),我想是因为一个选择中不能使用child和last-child。

但是有办法吗?

欢迎所有助手:P

ps>这是我从以下地方得到灵感的地方:nthmaster

最终编辑,这是我的解决方案:

.align div:nth-child(n):nth-child(odd):nth-last-child(n+3) {
  height: 20px;
  background: red;
}
<div class="align">
  <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>16</div>
</div>

我要做的就是将:nth-last-child(2)更改为:nth-last-child(n+3)

这使得代码不仅选择了最后一个孩子(2),还选择了数字2中的所有孩子div。

0 个答案:

没有答案