css webkits Der komplexe Selektor funktioniert nicht in der letzten Blinkversion: nth-child(2): nth-last-child(2){}




webkits (2)

Es gibt ein seltsames Problem: nach dem .groups .group:nth-child(2):nth-last-child(2){} Update-Selektor .groups .group:nth-child(2):nth-last-child(2){} aufhören zu arbeiten. Aber es funktioniert immer noch gut in Webkit und Gecko. Irgendwelche Ideen, wie man es repariert?

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

Sie können sehen, wie es hier funktioniert: http://jsfiddle.net/LAq73/1/

Wie es in Blinzeln funktioniert (Chrom):

Wie es in Safari funktioniert (Webkit):

Und endlich FF:

Irgendwelche Ideen, wie man es repariert?


Verwenden Sie nth-last-of-type anstelle von nth-last-child, um den Tag zu speichern.

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


Du machst es zu komplex.

Schreiben:

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

Geige hier arbeiten.





blink