第n个孩子的目标是第2、3、5、6、8、9等

Question

我想定位以下子元素：

.row .column:last-child .column:nth-child(2),
 .row .column:last-child .column:nth-child(3),
 .row .column:last-child .column:nth-child(5),
 .row .column:last-child .column:nth-child(6),
 .row .column:last-child .column:nth-child(8),
 .row .column:last-child .column:nth-child(9) {
...

但是有更好的方法来写这个吗？

Answer 1

您可以使用以下两个选择器的组合来选择相同模式中的第二个、第三个、第五个、第六个元素等。

• :nth-child(3n-1)

  - 选择第二个 (= 3*1 - 1)、第五个 (= 3*2 - 1)、第八个 (= 3*3 - 1)、...

• :nth-child(3n)

  - 选择第 3 个 (3*1)、第 6 个 (3*2)、第 9 个 (3*3)、...

li:nth-child(3n),
li:nth-child(3n-1) {
  color: red;
} 

.column:nth-child(3n),
.column:nth-child(3n-1) {
  color: red;
}

<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

注意： 在第 n 个子选择器中使用类时要小心，因为选择器不会仅计算具有该类的元素。 CSS 将为每个恰好具有该类的第 n 个元素设置样式。

因此，在下面的示例中，第三个元素将不会获得样式，因为它没有

class='column'

。第四个元素也不会获得样式（即使它是具有所需类的第三个子元素），因为如前所述，

nth-child

计算所有子元素，而不仅仅是具有上述类的子元素。

.column:nth-child(3n),
.column:nth-child(3n-1) {
  color: red;
}

<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

Answer 2

您的选择器基于三个条件的 OR 进行定位（.row 的后代或 .column 类型的最后一个子项或 .column 类型的第 n 个子项）。

此方法针对特定子项计数中的特定子项：

/* 9 items, match item 2: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(2)
{
  color: red;
}

/* 9 items, match item 3: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(3)
{
  color: red;
}

/* 9 items, match item 5: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(5)
{
  color: red;
}

/* 9 items, match item 6: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(6)
{
  color: red;
}

/* 9 items, match item 8: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(8)
{
  color: red;
}

/* 9 items, match item 9: */
.column:first-of-type:nth-last-of-type(9) ~ .column:nth-of-type(9)
{
  color: red;
}

<ul>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
  <li class='column'>1</li>
</ul>

我发现上述内容对于应用当子计数变化时也会变化的加权列宽很有用。

关于这个主题的额外一点知识是匹配 9 个孩子中的第一个孩子（因为它的做法不同，即没有相邻兄弟姐妹“〜”运算符）：

    /* 9 items, match item 1: */
    .column:first-of-type:nth-last-of-type(9)
    {
      color: green;
    }

    <ul>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
     <li class='column'>1</li>
    </ul>

Answer 3

有点晚了，但我很惊讶没有人提到简单且原生的 CSS

:first-child

，它可以被否定为

:not(:first-child)

。 对于您的情况，您可以替换这个巨大的选择器：

.row .column:last-child .column:nth-child(2),
 .row .column:last-child .column:nth-child(3),
 .row .column:last-child .column:nth-child(5),
 .row .column:last-child .column:nth-child(6),
 .row .column:last-child .column:nth-child(8),
 .row .column:last-child .column:nth-child(9) {
   ...
}

具有以下内容：

.row .column:last-child .column:not(:first-child):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(9+n)) {
   ...
}