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

您可以使用以下两个选择器的以下组合以相同的模式选择第2，第3，第5，第6个元素等。

:nth-child(3n-1) - 选择第二（= 3 * 1 - 1），第五（= 3 * 2 - 1），第8（= 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个元素设置样式，这个元素也恰好具有该类。

因此，在下面的示例中，第3个元素将不会获得样式，因为它没有class='column'。第4个元素也不会获得样式（即使它是第3个孩子拥有所需的类）因为如前所述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个子项）。

此方法针对特定儿童计数中的特定儿童：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

我发现以上内容对于应用在子计数更改时更改的加权列宽非常有用。

关于这个主题的额外一点知识将与9个孩子的第一个孩子相匹配（因为它的方式不同，即没有相邻的兄弟姐妹＆＃34;〜＆＃34;运营商）：

＆＃13;

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

＆＃13;

    <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>

＆＃13;

第n，3，5，6，8，9日等儿童

2 个答案: