如何使用 :nth-child 伪类更改奇数行上的瓷砖颜色答案

【问题标题】：How to use :nth-child pseudo-class to change color of tiles on odd rows如何使用 :nth-child 伪类更改奇数行上的瓷砖颜色
【发布时间】：2014-06-27 02:23:04
【问题描述】：

我正在构建一个 UI，我必须在单行上显示 2 个图块。我想要实现的是改变奇数行上的瓷砖颜色。这就是我正在做的：

div.tile:nth-child(odd),button.btn-odd:nth-child(n)
{
  background: rgba(26, 188, 156,1.0);
  border-color: rgba(26, 188, 156,1.0);
}

div.tile:nth-child(odd):hover,button.btn-odd:nth-child(n):hover,div.tile:nth-child(odd):hover .btn-odd 
{
    background: rgba(22, 160, 133,1.0);
    border-color: rgba(22, 160, 133,1.0)
}       
button.btn-odd:nth-child(n):focus
{
    background: rgba(22, 160, 133,1.0);
    border-color: rgba(22, 160, 133,1.0)    
}
button.btn-odd:nth-child(n):active
{
    background: rgba(22, 160, 133,1.0);
    border-color: rgba(22, 160, 133,1.0)    
}

欲了解更多信息，请查看此小提琴：http://jsfiddle.net/ZC43W/ [将其拉伸以查看连续 2 个图块] 现在的问题是第一行的瓷砖给了我所需的效果。但是，第 2 行（偶数行）上的图块也呈现出相同的效果（绿色，尽管它们应该是蓝色）。谁能告诉我为什么会这样？似乎第 n 个子选择器正在选择所有行而不是仅选择奇数行。

【问题讨论】：

您的 CSS 中出现了几次 :nth-child(n) - 这是对 any 子元素的保证匹配。
这基本上是选择奇数瓷砖上一行上的所有按钮。但是，是的，它可以以更好的方式完成。

标签： html css css-selectors

【解决方案1】：

您实际上应该将它们用作选择器...

div.row:nth-child(odd) div.tile
div.row:nth-child(odd) div.tile .btn-odd
div.row:nth-child(odd) div.tile:hover
div.row:nth-child(odd) div.tile:hover .btn-odd

... 等等，因为您希望效果基于行的（即div.row）索引来启动。

就目前而言，选择器覆盖了所有元素 - 因为每个 div.tile 实际上是 div.col-md-6 元素的单个子元素。 1是奇数，对吧。 )

Demo.

作为旁注，使用:nth-child(n) 是完全多余的（它将应用于前面选择器覆盖的任何元素）。除非你真的需要提高选择器的特异性——但话又说回来，有更好的方法来实现这一点。

【讨论】：

您的建议是正确的，但根据 NoN01 的 JSFiddle，由于
标签，它不会起作用。 :nth-child 在编号时考虑父级的所有直接子级。另一方面，NoN01 根本不需要
标签。他应该改用边距。
@dzny 让我猜猜——你还没有检查过小提琴，是吗？ ) 它有效，因为 outer 行之间没有<br />。但是，关于边距，您当然是正确的。
好吧，我现在明白我做错了什么。非常感谢！是的，我基本上是使用 :nth-child(n) 来选择所有奇数的平铺按钮。但就像你说的，有更好的方法来实现它。