css - 复杂选择器在最后一个闪烁版本中不起作用：nth-​​child(2):nth-last-child(2){}

Question

有一个奇怪的问题：闪烁更新选择器后.groups .group:nth-child(2):nth-last-child(2){}停止工作。但它仍然在 webkit 和 gecko 中运行良好。任何想法如何解决它？

HTML

<div class="groups">
    <div class="group"></div>
    <div class="group"></div>
    <div class="group"></div>
</div>

CSS

.groups .group{
    background-color:#000;
}
.groups .group:first-child{
    background-color:yellow;
}
.groups .group:nth-child(2):nth-last-child(2),
.groups .group:nth-child(2):last-child{
    background-color:red;
}
.groups .group:last-child:nth-child(3){
    background-color:green;
}
.groups{
    font-size:0;
}
.groups .group{
    display:inline-block;
    height:100px;
    width:30px;    
}

你可以在这里看到它是如何工作的：http: //jsfiddle.net/LAq73/1/

它如何在闪烁（chrome）中工作：

它如何在 safari (webkit) 中工作：

最后是FF：

任何想法如何解决它？

Answer 1

使用 nth-last-of-type 代替 nth-last-child 可以节省时间。

.groups .group{
    background-color:#000;
}
.groups .group:first-child{
    background-color:yellow;
}
.groups .group:nth-child(2):nth-last-of-type(2),
.groups .group:nth-child(2):last-child{
    background-color:red;
}
.groups .group:last-child:nth-child(3){
    background-color:green;
}
.groups{
    height:100px;
    font-size:0;
    line-height:0;
}
.groups .group{
    display:inline-block;
    height:100px;
    width:30px;    
}

http://jsfiddle.net/LAq73/3/

Answer 2

你让它太复杂了。

写：

.groups .group:first-child{ /*first child*/
    background-color:yellow;
}
.groups .group:nth-child(2){ /*second child*/
    background-color:red;
}
.groups .group:last-child{ /*last child*/
    background-color:green;
}

在这里工作小提琴。