css - que - El selector complejo no funciona en la última versión de parpadeo: nth-child(2): nth-last-child(2){}

webkit moz

Question

hay un problema extraño: después del selector de actualización del parpadeo .groups .group:nth-child(2):nth-last-child(2){} simplemente deja de funcionar. Pero todavía funciona bien en webkit y gecko. ¿Alguna idea para solucionarlo?

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

Puede ver cómo funciona aquí: http://jsfiddle.net/LAq73/1/

Cómo funciona en blink (cromo):

Cómo funciona en safari (webkit):

Y finalmente FF:

¿Alguna idea para solucionarlo?

Answer 1

El uso de nth-last-of-type en su lugar nth-last-child guarda el día.

.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

Lo estás haciendo demasiado complejo.

Escribir:

.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;
}

Violín de trabajo aquí.