如何让li:nth-child选择器基于全局li总数生效而非按ul重置？

当然可以搞定！你碰到的问题其实是CSS选择器的一个常见坑——:nth-child()这类选择器是相对于父元素计数的，所以每个ul里的li都会从1重新算，自然没法跨列表实现交替样式。下面给你几个实用的解决思路，按需选就行：

方案1：纯CSS实现（分两种场景） #

场景A：每个ul内只有1个li（你的常用场景） #

这种情况最省心，直接针对ul的全局奇偶序号来设置内部li的背景色就行：

/* 奇数位置的ul，内部li设浅灰背景 */
ul:nth-child(odd) li {
  background-color: #f5f5f5;
}

/* 偶数位置的ul，内部li设白色背景 */
ul:nth-child(even) li {
  background-color: #ffffff;
}

如果这些ul不是直接相邻的兄弟元素（比如中间混了其他标签），给它们加个统一类名（比如.list-item），再用.list-item:nth-child(odd)来选择，避免干扰页面里的其他ul。

场景B：ul内有多个li，需要跨列表连续奇偶计数 #

这种情况可以用CSS计数器结合自定义属性实现（支持绝大多数现代浏览器）：

/* 给所有ul的父容器初始化全局计数器 */
.list-wrapper {
  counter-reset: global-li 0;
}

/* 每个li递增计数器，并把计数存在自定义属性里 */
.list-wrapper li {
  counter-increment: global-li;
  --global-index: counter(global-li);
}

/* 根据全局序号设置奇偶背景 */
.list-wrapper li:nth-child(even of .list-wrapper li) {
  background-color: #f5f5f5;
}

如果需要兼容旧浏览器，建议直接用下面的JS方案更稳妥。

方案2：JavaScript通用方案（适配所有场景） #

不管ul里有多少li、结构是否复杂，JS都能精准控制全局奇偶顺序：

// 先筛选出所有需要参与交替的li（可以按类名/层级调整选择器）
const targetLis = document.querySelectorAll('ul.target-ul li');

// 遍历每个li，根据全局索引设置样式
targetLis.forEach((li, index) => {
  // 索引从0开始，所以index%2===0对应第1、3、5...个li
  li.classList.add(index % 2 === 0 ? 'odd-bg' : 'even-bg');
});

然后在CSS里写好类的样式：

.odd-bg { background-color: #f5f5f5; }
.even-bg { background-color: #ffffff; }

方案3：后端PHP添加奇偶类（服务端渲染场景） #

你提到的PHP加类思路完全可行，适合后端生成页面的场景，提前把全局序号算好，前端直接用CSS就行：

<?php
// 假设这是你的列表数据数组
$listData = ["内容1", "内容2", "内容3", "内容4"];
$globalCounter = 0;

foreach ($listData as $content) {
  $globalCounter++;
  // 根据计数器判断奇偶，添加对应类名
  $bgClass = $globalCounter % 2 === 1 ? 'odd-bg' : 'even-bg';
  echo "<ul><li class='{$bgClass}'>{$content}</li></ul>";
}
?>

根据你的实际场景选就行：如果是每个ul单个li，优先纯CSS；如果结构复杂或有多个li，JS或后端加类都很稳。

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