当前位置:  开发笔记 > 编程语言 > 正文

如果孩子的总数是偶数,如何将样式添加到倒数第二?

如何解决《如果孩子的总数是偶数,如何将样式添加到倒数第二?》经验,为你挑选了2个好方法。

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

  • One
  • Two
  • Three
  • Four

我想在上面的例子中将样式应用于Three li元素,但如果如下则没有.

  • One
  • Two
  • Three

Josh Crozier.. 7

你可以结合: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;
}
  • One
  • Two
  • Three
  • Four
  • One
  • Two
  • Three



1> Josh Crozier..:

你可以结合: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;
}
  • One
  • Two
  • Three
  • Four
  • One
  • Two
  • Three


2> Harry..:

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

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

li:nth-last-child(2):nth-child(odd) {
  color: red;
}
  • One
  • Two
  • Three
  • Four
  • One
  • Two
  • Three
推荐阅读
mobiledu2402851373
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有