使用div展示数据集时CSS :nth-child()隔行变色失效求助

算力阿峰

2026-8-1

问题分析

你的核心问题是**.indexrow容器的位置错误**：所有数据条目都被包裹在同一个.indexrow里，导致页面中只有一个.indexrow元素，:nth-child(even)规则找不到偶数行，同时单个容器的背景也会被内部列元素遮挡。

修复方案

把.indexrow的定义放到while循环内部，让每一条数据对应一个独立的.indexrow容器，这样这些容器作为兄弟节点，才能被:nth-child选择器正确匹配。同时需要调整CSS，确保.indexrow的布局正确（比如用Flexbox实现列排列）。

修正后的PHP/HTML代码

<?php
$wa_startindex = 0;
while(!$rsTitle->atEnd()) {
    $wa_startindex = $rsTitle->Index;
?>
<div class="indexrow">
    <div class="column left">
        <?php echo($rsTitle->getColumnVal("Title")); ?>
    </div>
    <div class="column middle">
        Issue: <a href="<?php echo($rsTitle->getColumnVal("PubFileName")); ?>" target="_blank" class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("IssueID")); ?></a>
    </div>
    <div class="column right">
        Page: <span class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("Page")); ?></span>
    </div>
</div>
<?php
    $rsTitle->moveNext();
}
$rsTitle->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>

调整后的CSS代码

/* 让每一行用Flex布局，列自动分配空间 */
.indexrow{
    background-color: #94C8F2;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 0; /* 可选，增加行内边距提升可读性 */
}
/* 偶数行背景变色 */
.indexrow:nth-child(even){
  background: #f2f2f2;
}
.indexrow a:hover{
    background-color: #FFFF00;
}
/* 定义列的宽度或比例 */
.column.left {
    width: 50%; /* 根据需求调整 */
    padding: 0 10px;
}
.column.middle {
    width: 30%;
    padding: 0 10px;
}
.column.right {
    width: 20%;
    padding: 0 10px;
}

为什么这样能解决问题