CSS :nth-child奇偶选择器跨页面生效异常问题求助

我正在使用PHP与MySQL搭建带评论功能的文章类网站，结构与常规博客类似，单篇文章页代码如下：

<?php 
$blog_id = "1";

include("../includes/blog.php");
?>

所有核心逻辑均封装在blog.php文件中。

为了实现评论区交替背景色、方便用户区分不同评论边界，我最初编写了如下CSS规则：

.comment:nth-child(2n+1){background-color:rgba(0,0,0,0.075)}

预期效果为第1、3、5等奇数位评论显示浅灰色背景，第2、4、6等偶数位评论显示白色背景。

• 第一篇文章底部仅有1条评论，正常显示浅灰色背景
• 第二篇文章同样只有1条评论，却显示白色背景，通过Chrome开发者工具检查元素发现，该评论未匹配到上述:nth-child对应的CSS规则
• 临时给第二篇文章添加第二条测试评论时，第二条评论显示为浅灰色，说明当前选择器实际匹配的是偶数位元素，与预期不符

后续尝试过两种修复方式均未生效：

• 将:nth-child(2n+1)替换为:nth-child(odd)，没有效果
• 将所有评论包裹在额外div容器中，使用如下CSS规则：

  .comment-wrapper :nth-child(2n+1){background-color:rgba(0,0,0,0.075)}
  

  该写法会将样式误应用到评论内部嵌套的段落标签，导致样式错乱。

:nth-child伪类的计数规则是统计父元素下所有类型的子元素位置，不会过滤掉不带.comment类的其他兄弟节点。第二篇文章的评论区容器内，第一条评论前存在其他子元素（比如评论区标题、表单提示、分隔节点等），占据了第1个奇数位置，导致第一条评论实际排在父元素的第2位，无法匹配奇数规则，第二条评论落在第3位时反而被命中样式。
之前包裹容器后出现样式错乱，是因为空格分隔的后代选择器会匹配容器下所有层级的子元素，包括评论内部嵌套的p、span等标签。

两种方案可任选其一：

方案1：替换伪类（无需改动HTML结构） #

如果所有.comment评论项使用的是同一种HTML标签（比如统一为div、article或li），直接将:nth-child替换为:nth-of-type即可，该伪类只会统计同标签名的兄弟节点位置，不会被其他不同标签的元素干扰：

.comment:nth-of-type(2n+1){
  background-color:rgba(0,0,0,0.075)
}

方案2：结构优化（最稳妥，推荐使用） #

1. 调整评论区HTML结构，将所有评论项单独放到专属列表容器中，该容器内仅存放.comment元素，评论区标题、发表表单、提示语等内容全部放到容器外部：

<h3>用户评论</h3>
<form class="comment-form"><!-- 发表评论表单内容 --></form>
<!-- 评论列表容器，内部仅放.comment项 -->
<div class="comment-list">
  <div class="comment"><!-- 第一条评论内容 --></div>
  <div class="comment"><!-- 第二条评论内容 --></div>
  <div class="comment"><!-- 第三条评论内容 --></div>
</div>

2. CSS使用直接子选择器>匹配评论项，避免选中评论内部的嵌套标签：

.comment-list > .comment:nth-child(2n+1){
  background-color:rgba(0,0,0,0.075)
}

该方案计数完全和评论顺序对应，不受其他元素干扰，也不会出现内部标签样式误匹配的问题。

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