在网页设计中，隔行换色是一种常见的视觉优化技巧，用于提高表格或列表的可读性。通过为偶数行和奇数行设置不同的背景颜色，可以使得数据更易于区分和阅读。在这个案例中，我们将探讨如何使用纯CSS来实现带序号的表格隔行换色效果，而无需依赖JavaScript。
我们需要创建一个HTML结构，这里是一个包含列表项（`<li>`）的有序列表（`<ol>`）。列表项将作为表格的行，而有序列表则扮演表格的角色。示例代码如下：
```html
<div class="test">
<ol>
<li>观自在菩萨</li>
<li>行深般若波罗密多时</li>
<!-- 更多列表项... -->
</ol>
</div>
```
接下来，我们来编写CSS样式。为了实现隔行换色的效果，我们可以利用CSS的`:nth-child()`选择器。`:nth-child(odd)` 选择器匹配所有奇数位置的元素，`:nth-child(even)` 选择器匹配所有偶数位置的元素。这里的核心CSS代码如下：
```css
.test {
border: 1px solid #000;
color: #333;
font: 12px;
}
.test ol li {
padding-left: 5px;
}
/* 使用CSS表达式实现隔行换色，但这种方法在现代浏览器中已不推荐 */
.test ol li {
background-color: expression(this.sourceIndex % 2 ? '#efefef' : '#fefefe');
}
/* 更推荐的现代CSS方法，使用:nth-child()选择器 */
/* .test ol li:nth-child(odd) {
background-color: #efefef;
}
.test ol li:nth-child(even) {
background-color: #fefefe;
}
*/
```
在上述代码中，我们为`.test ol li`元素设置了内边距和背景颜色。为了实现隔行换色，我们使用了CSS表达式`expression(this.sourceIndex % 2 ? '#efefef' : '#fefefe')`。不过，需要注意的是，CSS表达式在现代浏览器中已被废弃，因此更推荐使用`:nth-child()`选择器来替换。在注释掉的代码段中，我们展示了如何使用`:nth-child(odd)`和`:nth-child(even)`来达到相同的效果。
为了增加序号，我们可以在每个列表项之前添加一个序号。一种方法是使用CSS伪元素`::before`，并利用`content`属性：
```css
.test ol li::before {
content: attr(data-index) ". ";
display: inline-block;
width: 2em;
text-align: right;
margin-right: 5px;
}
```
然后，在HTML中为每个`<li>`元素添加`data-index`属性来存储序号：
```html
<ol>
<li data-index="1">观自在菩萨</li>
<li data-index="2">行深般若波罗密多时</li>
<!-- 更多列表项... -->
</ol>
```
通过这种方式，我们可以实现一个带有序号且隔行换色的表格效果，同时避免了使用JavaScript。这个纯CSS的解决方案不仅简化了代码，而且提高了性能，特别是在处理大量数据时。然而，对于更复杂的表格功能，如排序和筛选，可能仍需要借助JavaScript库，如jQuery DataTables或类似的工具。
