css实现table 每三行一个斑马纹的样式？

Question

每三行数据一个背景色 要求纯css实现 因为要打包成app app中无法使用window.去操作

Answer 1

如一楼所说，使用伪类选择器。

.classname 是你表格中每行的公共类。

:nth-child - CSS：层叠样式表 | MDN

.classname:nth-child(3n+1) {
    background: #ccc;
      // 也可以自定义其他背景，比如 linear-gradient 生成的条纹背景等
}

Answer 2

这样的每三行？

<style>
    .table {
        border-collapse: collapse;
    }

    .table td {
        border: 1px solid #ddd;
    }

    .table tr {
        background-color: #f9f9f9;
    }

    .table tr:nth-child(6n + 1),
    .table tr:nth-child(6n + 2),
    .table tr:nth-child(6n + 3) {
        background-color: #ffffff;
    }

    .table tr:nth-child(6n + 4),
    .table tr:nth-child(6n + 5),
    .table tr:nth-child(6n + 6) {
        background-color: #cccccc;
    }
</style>
<table class="table">
    <thead>
        <tr> <th>COL 1</th> <th>COL 2</th> </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>1</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
        </tr>
        <tr>
            <td>A</td>
            <td>3</td>
        </tr>
        <tr>
            <td>B</td>
            <td>1</td>
        </tr>
        <tr>
            <td>B</td>
            <td>2</td>
        </tr>
        <tr>
            <td>B</td>
            <td>3</td>
        </tr>
        <tr>
            <td>C</td>
            <td>1</td>
        </tr>
        <tr>
            <td>C</td>
            <td>2</td>
        </tr>
        <tr>
            <td>C</td>
            <td>3</td>
        </tr>
        <tr>
            <td>D</td>
            <td>1</td>
        </tr>
        <tr>
            <td>D</td>
            <td>2</td>
        </tr>
        <tr>
            <td>D</td>
            <td>3</td>
        </tr>
        <tr>
            <td>E</td>
            <td>1</td>
        </tr>
        <tr>
            <td>E</td>
            <td>2</td>
        </tr>
        <tr>
            <td>E</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Answer 3

伪类选择器

table tr:nth-child(3n+1) {
  background: #ccc;
}