CSS：仅显示列表中的最后x项

Question

是否可以使用纯CSS显示列表中的最后x项？

以下代码段显示了除第一项之外的所有项目。我如何只显示列表中的最后两项？

ul li {
    display: none !important;
}

ul li:nth-of-type(2) ~ li {
    display: inherit !important;
}

Answer 1

https://jsfiddle.net/mechskt2/

使用:nth-last-of-type(-n+x)或:nth-of-type(n+x)

Answer 2

只需使用nth-last-of-type。

ul li:nth-last-of-type(2),
ul li:nth-last-of-type(2) ~ li {
    display: inherit !important;
}