html - Css nth-child 工作很奇怪

标签 html css

我试着做一个条纹表。但是当我尝试使用第 nth-child 时,它的工作方式真的很奇怪

模板:

...
<tr class="striped">...</tr>
<tr class="more">...</tr>
...

CSS:

tr.striped:nth-child(odd) {
    background-color : rgba($mainColor, .1);
}

但是所有带有条纹类的 tr 都是彩色的。也许我错过了规范的某些功能?

最佳答案

使用这个:

tr:nth-child(4n+1)

代替:

tr.striped:nth-child(odd)

演示:https://jsfiddle.net/sabeti05/epnjn1wo/

关于html - Css nth-child 工作很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37502662/

相关文章:

javascript - 将 div 附加到所选文本

javascript - Bootstrap 4 Beta 中 Carousel 的淡入淡出过渡

javascript - OwlCarousel 和 bootstrap 幻灯片在网站中的使用

javascript - 根据正在播放的声音显示文本

javascript - 如何获得链接到新页面的按钮,并预先填充搜索栏

html - border-width 中的 CSS calc()?

javascript - CSS 插入阴影不起作用,创建垂直线

html - 在 div 的顶部中心对齐文本,在末尾对齐按钮

css - 在 CSS、Dreamweaver 中使用导航菜单的字间距

javascript - 为什么不在 WordPress 的 Bootstrap 下拉列表中显示所选元素?