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

I'd like to target the following the children elements:

我想将以下子元素作为目标:

.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) {
...

but is there a better way to write this?

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

2 个解决方案

#1

You can use the below combination of the below two selectors to select 2nd, 3rd, 5th, 6th elements and so on in the same pattern.

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

:nth-child(3n-1) - Selects 2nd (= 3*1 - 1), 5th (= 3*2 - 1), 8th (= 3*3 - 1), ...

:nth-child(3n-1) - 选择2nd(= 3 * 1 - 1),5th(= 3 * 2 - 1),第8(= 3 * 3 - 1),...

:nth-child(3n) - Selects 3rd (3*1), 6th (3*2), 9th (3*3), ...

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

Note: Be careful while using a class in the nth-child selector because the selector will not count just the elements with that class alone. CSS would style every nth-element which also happens to have that class.

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

So, in the below sample the 3rd element will not get the style because it does not have the class='column'. The 4th element will also not get the style (even though it is the 3rd child to have the required class) because as mentioned earlier nth-child counts all children and not just the children with the mentioned class.

因此,在下面的示例中,第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>

#2

Your selector is targeting based on the OR of the three conditions (descendant of .row OR last child of .column type OR nth child of .column type).

您的选择器的目标是基于三个条件的OR(.row的后代或.column类型的最后一个子项或.column类型的第n个子项)。

This approach targets a specific child within a specific child count:

此方法针对特定子项中的特定子项:

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

I have found the above useful for applying weighted column widths that change when the child count changes.

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

An extra bit of knowledge on this subject would be matching the first child of 9 children (as it is done differently, that is, without the Adjacent Sibling "~" operator):

关于这个主题的一些额外知识将匹配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>

#1