如何实现排除.hidden类后的CSS奇偶行交替样式及首尾圆角效果？

这个问题我之前也碰到过！核心原因是CSS的:nth-of-type、:first-of-type这类选择器是基于元素在DOM结构里的原始位置来计数/匹配的——哪怕你给元素加了.hidden让它display:none，它依然会被算在奇偶计数里，也依然会占据“第一个/最后一个元素”的位置，所以才会出现Line2既没有正确的背景色，也没有顶部圆角的情况。

下面给你两种可行的解决办法，你可以根据项目的浏览器兼容性需求来选：

一、纯CSS方案（适合现代浏览器） #

如果你的项目不需要兼容Chrome 111、Firefox 113、Safari 16.4之前的旧版本浏览器，可以用CSS Selectors Level 4的新特性——nth-child(an+b of <selector>)，它能直接在指定选择器匹配的元素集合里计数，完美避开隐藏元素的干扰。

修改后的CSS代码如下：

.spreadsheet {
  display: grid;
  grid-auto-flow: row;
}

.spreadsheet > div {
  padding: 0.5rem;
}

/* 匹配第一个可见元素 */
.spreadsheet > :not(.hidden):nth-child(1 of :not(.hidden)) {
  border-radius: 1rem 1rem 0 0;
}

/* 匹配唯一的可见元素 */
.spreadsheet > :not(.hidden):only-child {
  border-radius: 1rem;
}

/* 匹配最后一个可见元素 */
.spreadsheet > :not(.hidden):nth-last-child(1 of :not(.hidden)) {
  border-radius: 0 0 1rem 1rem;
}

/* 在可见元素里找奇数行 */
.spreadsheet > :not(.hidden):nth-child(odd of :not(.hidden)) {
  background-color: #fafafa;
}

/* 在可见元素里找偶数行 */
.spreadsheet > :not(.hidden):nth-child(even of :not(.hidden)) {
  background-color: #eaeaea;
}

.hidden {
  display: none;
}

这个写法的逻辑是先筛选出所有.hidden之外的元素，再在这个集合里做奇偶计数和首尾匹配，完全符合你的需求。

二、JavaScript方案（兼容性拉满） #

如果需要兼容旧浏览器，用JS动态控制样式类是更稳妥的选择。思路很简单：每次完成过滤操作（添加/移除.hidden类）后，遍历所有可见行，给它们手动加上奇偶、首尾对应的类，再用这些类来写样式。

第一步：编写基础CSS #

.spreadsheet {
  display: grid;
  grid-auto-flow: row;
}

.spreadsheet > div {
  padding: 0.5rem;
}

/* 首行圆角 */
.spreadsheet > .row-first {
  border-radius: 1rem 1rem 0 0;
}

/* 末行圆角 */
.spreadsheet > .row-last {
  border-radius: 0 0 1rem 1rem;
}

/* 唯一行圆角 */
.spreadsheet > .row-only {
  border-radius: 1rem;
}

/* 奇数行背景 */
.spreadsheet > .row-odd {
  background-color: #fafafa;
}

/* 偶数行背景 */
.spreadsheet > .row-even {
  background-color: #eaeaea;
}

.hidden {
  display: none;
}

第二步：编写JS逻辑 #

// 定义更新样式的函数
function updateSpreadsheetStyles() {
  const spreadsheet = document.querySelector('.spreadsheet');
  // 获取所有可见的行
  const visibleRows = Array.from(spreadsheet.querySelectorAll('div:not(.hidden)'));
  
  // 先清除之前添加的样式类，避免重复
  visibleRows.forEach(row => {
    row.classList.remove('row-odd', 'row-even', 'row-first', 'row-last', 'row-only');
  });
  
  // 没有可见行的话直接返回
  if (visibleRows.length === 0) return;
  
  // 只有一行的情况
  if (visibleRows.length === 1) {
    visibleRows[0].classList.add('row-only');
    return;
  }
  
  // 给首尾行加类
  visibleRows[0].classList.add('row-first');
  visibleRows[visibleRows.length - 1].classList.add('row-last');
  
  // 给奇偶行加类
  visibleRows.forEach((row, index) => {
    row.classList.add(index % 2 === 0 ? 'row-odd' : 'row-even');
  });
}

// 示例：假设你有个过滤按钮，点击后执行过滤逻辑再更新样式
document.querySelector('#filter-button')?.addEventListener('click', () => {
  // 这里写你的过滤逻辑，比如给符合条件的行添加/移除.hidden类
  // ...
  
  // 过滤完成后更新样式
  updateSpreadsheetStyles();
});

// 页面加载完成后先执行一次，初始化样式
window.addEventListener('DOMContentLoaded', updateSpreadsheetStyles);

这样不管浏览器版本如何，都能准确根据可见行的实际顺序来应用样式，逻辑清晰也容易维护。

备注：内容来源于stack exchange，提问作者andrilla