<分区>
<分区>
我需要为我的 html 中的每 5 行提供一个单独的样式。例如:第 5、10、15、25、...行与其他不是 5 的倍数的行相比具有灰色背景。我的问题是我不知道什么是正确的 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选择器
tr:nth-child(5n) {
background-color: gray;
}
关于html - 选择css中元素的所有第n次出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31954800/
相关文章：
html - 底部页面上的孤儿 CSS : How avoid headers (h1, h2...)？
javascript - 有没有办法散列用于 map 的 html dom 元素？
css - 你如何在没有编译器的情况下在 Joomla 中使用 CSS LESS？
javascript - ng-bind-html html 与 css 不起作用
html - 全屏控制 openlayers map 中的位置
html - Safari 不支持媒体查询 : display: table-cell to display: block