todos que navegadores moz los khtml con compatible chrome css webkit css-selectors blink

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



webkit moz (2)

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/

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?


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í.