Html 如何使用：n子伪类更改奇数行上瓷砖的颜色

我正在构建一个UI，在这个UI中，我必须在一行上显示两个平铺。我试图实现的是改变奇数行的瓷砖颜色。 这就是我正在做的：

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

有关更多信息，请查看此提琴：[将其展开以查看一行上的两个瓷砖]

---

现在的问题是，第一排的瓷砖给了我所需的效果。然而，第二排（偶数排）的瓷砖也显示出相同的效果（绿色，但它们应该是蓝色）。谁能告诉我为什么会这样？似乎第n个子选择器正在选择所有行，而不是仅选择奇数行。

您实际上应该使用这些行作为选择器

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是奇数，对吗

---

作为旁注，使用

：n子元素（n）

是完全冗余的（它将应用于前面的选择器所涵盖的任何元素）。除非您真的需要提高选择器的特异性-但是，还是有更好的方法来实现这一点。

您的CSS中有一些实例

：n子元素（n）

-这在任何子元素上都是保证匹配的。这基本上是选择奇数块上一行上的所有按钮。但是，是的，它可以用更好的方式完成。您的建议是正确的，但根据NoN01的JSFIDLE，由于标签的原因，它将无法工作：第n个子项在编号时考虑父项的所有直接子项。另一方面，NoN01根本不需要
标记。他应该用边距来代替。@dzny让我猜猜——你还没有检查小提琴，是吗？）它可以工作，因为外部行之间没有

。当然，关于利润率，你是对的。对，我现在明白我做错了什么。非常感谢！是的，我基本上是用：nth child（n）来选择所有奇怪的平铺按钮。但正如你所说，有更好的方法来实现它。