E:nth-last-child

匹配E元素, 当它为其父级元素的第n个子元素的时候,不过,是从最后一个开始算起。(来源: W3C)

HTML:

  1. <div>
  2. <p>Lorem ipsum dolor sit amet, consectetur</p>
  3. <p>Lorem ipsum dolor sit amet, consectetur</p>
  4. <p>Lorem ipsum dolor sit amet, consectetur</p>
  5. </div>

CSS:

  1. p{font-style:normal}
  2. p:nth-last-child(2){font-style:italic}
  3. p:nth-last-child(odd){color:green}

输出:

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

在这个例子中,倒数第二个段落的文字将会显示为斜体。而第六个、第四个、第二个(复数)将会显示为绿色。
PS:如果有偶数个子元素, nth-last-child(odd)和nth-child(odd)的效果一样,而如果有奇数个子元素,两者正好相反 nth-last-child(odd)=nth-child(even)。——译者。