Complex selector don't work in last blink version :nth-child(2):nth-last-child(2){}

前端 未结 2 677
春和景丽
春和景丽 2021-01-23 02:11

there is strange problem: after blink update selector .groups .group:nth-child(2):nth-last-child(2){} just stop working. But it still works well in webkit and gecko

相关标签:
2条回答
  • 2021-01-23 02:23

    Usage of nth-last-of-type instead nth-last-child save the day.

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

    0 讨论(0)
  • 2021-01-23 02:33

    You are making it too complex.

    Write:

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

    Working fiddle here.

    0 讨论(0)
提交回复
热议问题