选择css中所有第n次出现的元素[重复]答案

【问题标题】：Select all nth occurrence of an element in css [duplicate]选择css中所有第n次出现的元素[重复]
【发布时间】：2015-11-04 10:44:48
【问题描述】：

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

为了达到这个效果，我已经做了这些事情，但尽可能避免：

为每五次出现添加一个class 属性：

    <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>

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

var trs = $("tbody tr")

for(var trx = 0; trx < trs.length; trx++) {
    if(trx + 1 % 5 == 0) {
        var tr = $(trs[trx])
        tr.css({
            .....
        })
    }
}

【问题讨论】：

:nth-child 是你的朋友
顺便提一下，CSS标识符不能以数字开头，所以.5th-row不起作用，但可以转义为.\35 th-row

标签： html css

【解决方案1】：

您需要为此使用nth-child 选择器

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

【讨论】：

:nth-child(5n) 中的n 是怎么回事？
公式为 (an + b) 其中a 表示循环大小，n 是从0 开始的计数器，b 是偏移值。