html中怎么调整表格斑马线条纹 nth-child用法

/* 基础样式，确保表格结构清晰 */
table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免双线 */
}

th, td {
  border: 1px solid #ddd; /* 浅灰色边框 */
  padding: 8px;
  text-align: left;
}

/* 偶数行背景色 */
tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* 更浅的灰色 */
}

/* 鼠标悬停效果（可选） */
tbody tr:hover {
  background-color: #ddd;
}

/* 每三行应用一次样式 */
tbody tr:nth-child(3n) {
  background-color: #e0e0e0;
}

/* 从第一行开始，每隔四行应用一次样式 */
tbody tr:nth-child(4n+1) {
  font-weight: bold; /* 突出显示 */
}

/* 只对tbody中的行应用条纹 */
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 如果有多个tbody，分别应用 */
table tbody:nth-of-type(1) tr:nth-child(even) {
  background-color: #f2f2f2; /* 第一个tbody */
}

table tbody:nth-of-type(2) tr:nth-child(even) {
  background-color: #e0e0e0; /* 第二个tbody */
}

// 假设data是表格数据
function renderTable(data) {
  const tableBody = document.querySelector('tbody');
  tableBody.innerHTML = ''; // 清空旧数据

  data.forEach((row, index) => {
    const tr = document.createElement('tr');
    if (index % 2 === 0) {
      tr.classList.add('even'); // 添加even类
    }

    // 填充表格单元格...
    tableBody.appendChild(tr);
  });
}

// CSS
.even {
  background-color: #f2f2f2;
}

:root {
  --even-row-background: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: var(--even-row-background);
}