如何为包含10个<li>的<ul>中前5个或后5个<li>设置颜色？

针对你这个包含10个<li>的<ul>列表，完全不需要额外给元素加class-name，用CSS的结构伪类就能精准选中目标元素，下面分两种场景给你具体实现：

一、选中前5个<li> #

用:nth-child(-n+5)伪类，它的逻辑是匹配所有索引小于等于5的子元素（索引从1开始），刚好对应前5个<li>。

修改你的CSS代码，添加以下规则：

.list-inline{margin:0; padding:0;}
.list-inline > li{list-style:none; display:inline-block; float:left; background:#000; color:#fff; padding:6px 12px; text-align:center;}
/* 前5个li的自定义样式 */
.list-inline > li:nth-child(-n+5) {
    /* 这里替换成你想要的颜色，示例：文字红+背景深灰 */
    color:#ff4444;
    background:#333;
}

二、选中后5个<li> #

有两种常用的伪类可以实现，选哪个看你的习惯：

1. :nth-child(n+6)：匹配索引大于等于6的子元素，对应第6到第10个（也就是后5个）
2. :nth-last-child(-n+5)：从最后一个元素往前数，匹配倒数第1到第5个元素，逻辑更直观

推荐用第二种，代码语义更清晰，添加规则如下：

.list-inline{margin:0; padding:0;}
.list-inline > li{list-style:none; display:inline-block; float:left; background:#000; color:#fff; padding:6px 12px; text-align:center;}
/* 后5个li的自定义样式 */
.list-inline > li:nth-last-child(-n+5) {
    /* 示例：文字绿+背景深蓝 */
    color:#00C851;
    background:#0044cc;
}

如果需要同时给前5个和后5个设置不同样式，直接把两个规则同时加到CSS里就行，完全不会冲突，你的HTML结构也不需要做任何修改。

内容的提问来源于stack exchange，提问作者Sangrai