Вопрос по webkit, blink, css-selectors, css – Сложный селектор не работает в последней версии мигания: nth-child (2): nth-last-child (2) {}

2

возникает странная проблема: после мигания селектор обновлений.groups .group:nth-child(2):nth-last-child(2){} просто перестань работать. Но это все еще хорошо работает в webkit и gecko. Есть идеи как это исправить?

HTML


    
    
    

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/

Как это работает в мерцании (хром):

Как это работает в сафари (webkit):

И наконец FF:

Есть идеи как это исправить?

И Chrome 31.0.1650.57, и Canary 33.0.1726.0 работают так же, как Gecko, для меня. Какие'споследняя мигающая версия, Я думаю? raina77ow

Ваш Ответ

2   ответа
-1

Написать:

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

Рабочая скрипка здесь.

Ну, мне это нужно :) SilentImp
почему проголосовали ?? Hiral
2

Использование 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/

Обратите внимание, что это работает, только если все элементы имеют одинаковый тип (в данном случае этоdiv) - иначе тыбуду SOL. BoltClock
Так что Блинк необъяснимо имеет проблемы с:nth-last-child(), Можете ли вы проверить этот обходной путь сstackoverflow.com/questions/20346681/... и посмотреть, работает ли это так же хорошо? Если это так, то этоВероятно, та же проблема, и та, которая затрагивает только Chrome на Mac. BoltClock

Похожие вопросы