怎么做:n-last-child(1 + odd)

Question

我想做一些类似的事情nth-last-child(1 + odd),最后一个孩子受到影响,但只有元素是奇数.

nth-last-child(1 + odd) 虽然不起作用,所以我该怎么办？

---

奖金:一个更灵活的答案,允许我抓住最后一个孩子,只有它是奇怪的和奇怪的孩子在它之前.

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>affected</li>
  <li>not effected</li>
  <li>affected</li>
</ul>

但如果最后一个孩子即将到来,则没有任何反应,所以:

<ul>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
  <li>not effected</li>
</ul>

Answer 1

我建议使用两个伪类略有不同的方法:

:nth-child(odd):last-child

这首先选择所有奇数子元素,并将选择仅精炼到父元素的最后一个子元素.

div {
  margin: 0 0 0.5em 0;
}
span {
  display: inline-block;
  counter-increment: spanIndex;
  width: 2em;
  height: 2em;
  border: 2px solid #000;
  border-radius: 25%;
  margin: 0 0.5em 0 0;
}

span::before {
  content: counter(spanIndex, decimal-leading-zero);
}

span:nth-child(odd):last-child {
  background-color: #f90;
}

<div><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>