使用 nth-child 来实现不一致的格式？

Question

编写这段代码最经济的方法是什么？

.colHeaders div:nth-child(2),
.colHeaders div:nth-child(3),
.colHeaders div:nth-child(4),
.colHeaders div:nth-child(11),
.colHeaders div:nth-child(12),
.colHeaders div:nth-child(14),
.colHeaders div:nth-child(15),
.colHeaders div:nth-child(16) {background: lightgrey;}

为什么我可以告诉 nth-child 在父元素的开头跳过子元素，而不是末尾？

例如：

.colHeaders div:nth-child (2,3,4,11,12,14,15,16) {background: lightgrey;}

.colHeaders div:nth-child (2-4,11-12,14-16) {background: lightgrey;}

.colHeaders div:nth-child (n+2,4) {background: lightgrey;}
.colHeaders div:nth-child (n+11,12) {background: lightgrey;}
.colHeaders div:nth-child (n+14,16) {background: lightgrey;}

Answer 1

从你的陈述来看，你想要

2/3/4、11/12 以及最后 3 个。

您可以使用

:is()

“合并”选择器，并使用

nth-child

和

nth-last-child

定位各个范围。

对于范围，您可以声明“nth-child(n+X):nth-child(-n+Y)”，其中 X 是第一个被选择的，Y 是最后一个被选择的。

像这样：

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  gap: 0.25em;
}

.item {
  padding: .5em;
  border: 1px solid grey;
}

.item:is(:nth-child(n+2):nth-child(-n+4),
/*2, 3 & 4 */

:nth-child(n+11):nth-child(-n+12),
/*11 & 12 */

:nth-last-child(-n + 3))
/* last 5 */

{
  background: lightgreen;
}

<div class="wrap">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
  <div class="item">Item 16</div>
</div>