我可以 select 每 10 个元素前 5 个元素吗？

Question

因此，我有一个包含 20 行的 table。我想改变每 5 个元素的颜色。在我的脑海中，我可以通过每 10 个元素 select 然后 select 接下来的 5 来将它们的颜色从绿色更改为灰色。我知道如何每 10 次 select，但不明白如何在他们旁边 select 5。你能帮忙吗？

css 我用来 select 每 10 个元素：

.fl-table tr:nth-child(10n + 1) th {
    background: #324960;
}

Table HTML:

<h2>Responsive Table</h2>
<div class="table-wrapper">
    <table class="fl-table">
        <tbody>
            <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
                <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
                <tr>
                <th>Header 1</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 3</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 4</th>
                <td>Content 1</td>
            </tr>
            <tr>
                <th>Header 5</th>
                <td>Content 1</td>
            </tr>
        <tbody>
    </table>
</div>

这是现在的样子：current view

我也需要在红色方块中做灰色，所以应该是 5 灰色，然后 5 绿色，然后 5 灰色等等：what I want

Answer 1

您的公式正确，您的 css 只缺少第 2、第 3、第 4 和第 5 个选择器，这里是工作示例：

ul li:nth-child(10n+1),
ul li:nth-child(10n+2),
ul li:nth-child(10n+3),
ul li:nth-child(10n+4),
ul li:nth-child(10n+5) {color:red;}

<ul>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      <li>bbb</li>
      
    </ul>

我可以 select 每 10 个元素前 5 个元素吗？

Can I select first 5 elements every 10 elements?

html

css

css-selectors