CSS类作用范围异常：如何限定.table-striped-two-rows仅作用于指定表格

这个问题其实是CSS选择器的作用范围没限定到位导致的～你原来的代码里，第二个选择器 tbody tr:nth-child(4n+2) 没有绑定 .table-striped-two-rows 类，所以它会匹配所有表格里的对应行，自然就影响到了没加这个类的表格。

只需要把两个选择器都明确限定在带有 .table-striped-two-rows 类的表格内部即可，修正后的代码如下：

.table-striped-two-rows tbody tr:nth-child(4n+1), 
.table-striped-two-rows tbody tr:nth-child(4n+2) { 
    background-color: rgba(0, 0, 0, 0.05); 
}

这样写的话，样式只会作用在添加了 class="table-striped-two-rows" 的表格里的对应行，其他表格完全不受影响。

如果你用的是Sass/Less这类CSS预处理器，还可以用嵌套写法让代码更简洁：

.table-striped-two-rows {
    tbody {
        tr:nth-child(4n+1), tr:nth-child(4n+2) {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
}

不过如果是原生CSS，还是用第一种完整写法最稳妥。

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