如果孩子的总数是偶数，如何将样式添加到倒数第二个？

Question

所以，我有一个动态数量的列表项，我想将样式应用到倒数第二个....如果只有偶数个元素。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

我希望在上面的例子中将样式应用于Three li元素，但如果如下，则无效。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 1

您可以合并:nth-child(odd)和:nth-last-child(2)。

这是有效的，因为:nth-last-child(2)会选择倒数第二个孩子，而:nth-child(odd)只会选择奇数。如果孩子的总数是偶数，则倒数第二个孩子总是奇数。

ul li:nth-child(odd):nth-last-child(2) {
  color: #f00;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

您可以使用两个选择器的组合，如下面的代码段所示。

当父元素具有偶数个子元素时，第二个最后一个元素必须是奇数编号的元素，因此如果元素与nth-last-child(2)和nth-child(odd)匹配则表示它是第二个元素父节点的最后一个子节点和父节点具有偶数个元素。

li:nth-last-child(2):nth-child(odd) {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>