如何用CSS删除<ul>列表中的最后两个<li>元素？

你可以用CSS伪类选择器精准定位<ul>里的最后两个<li>元素，无需修改HTML内联样式，具体实现如下：

简洁写法（推荐） #

/* 选中列表里的最后两个li元素并隐藏 */
ul li:nth-last-child(-n+2) {
    display: none;
}

nth-last-child(-n+2)的逻辑是：从列表的倒数第1个元素开始，向前选中2个元素，刚好对应最后两个<li>。

拆分写法（更直观） #

如果觉得上面的写法不好理解，也可以分开选中倒数第2个和最后1个元素：

ul li:nth-last-child(2),
ul li:last-child {
    display: none;
}

注意事项 #

如果页面上有多个<ul>列表，建议给目标列表加上专属类名（比如task-list），避免误影响其他列表：

.task-list li:nth-last-child(-n+2) {
    display: none;
}

内容的提问来源于stack exchange，提问作者Harpreet Singh Kapula