Question

我需要为html的每第5行提供单独的样式。例如：5号，10号，15号，25号......行的灰色背景与不是5的倍数的其他行相比。我的问题是我不知道什么是正确的{{1}选择器。

这些是我为实现这种效果所做的事情，但是尽可能避免：

为每第五次出现添加css属性：
```
class
```

使用JavaScript迭代所有行并更改每第五行的样式：

    <style>
        tbody tr.5th-row {
            .....
        }
    </style>
</head>
<body>
    <thead>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>

        <tr class="5th-row">...</tr>

        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>

        <tr class="5th-row">...</tr>
    </thead>

Answer 1

您需要为此

使用nth-child选择器

tr:nth-child(5n) {
  background-color: gray;
}

选择css中所有第n个元素

1 个答案: