如何使用：nth-​​child伪类改变奇数行上瓦片的颜色

Question

我正在构建一个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个子选择器正在选择所有行而不是仅选择奇数行。

Answer 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)显然是多余的（它将应用于前面的选择器所涵盖的任何元素）。除非你真的需要提高选择器的特异性 - 但是再次，有更好的方法来实现这一点。