uni-app入门-实战教程-十五-CSS3选择器

常用的总结提取出来啦、

/* :nth-child(1) box组件中的第一个view 背景色设置 按照顺序设置，弊端，同一组件中可能包含不同组件，这个只能按照顺序设置*/

/*:nth-of-type(1)  box组件中的第一个view 背景色设置   与child区别， type同一类型的组件有效，不会被中间的其他组件干扰*/

/*:first-child 第一的背景色 */

/*:last-child 最后一个的背景色 */
/*:last-of-type 最后一个的背景色   同样的，区别在于同一类型组件有效，不受别的组件干扰*/

/* :nth-of-type(2n-1)奇数偶数-选择器 */
/* :nth-of-type(2n)奇数偶数-选择器 */
/*:nth-of-type(odd) 简写 奇数 */
/*:nth-of-type(even)  简写  偶数*/
        

详情使用案例、

<style>
    
    /* box组件中的第一个view 背景色设置 按照顺序设置，弊端，同一组件中可能包含不同组件，这个只能按照顺序设置*/
    .box>view:nth-child(1){
        background: #007AFF;
    }
    
    /* box组件中的第一个view 背景色设置   与child区别， type同一类型的组件有效，不会被中间的其他组件干扰*/
    .box>view:nth-of-type(1){
        background: #007AFF;
    }
    .box>view:nth-of-type(2){
        background: #007AFF;
    }
    /* 第一的背景色 */
    .box>view:first-child{
        background: #007AFF;
    }
    /* 最后一个的背景色 */
    .box>view:last-child{
        background: #007AFF;
    }
    
    /* 最后一个的背景色   同样的，区别在于同一类型组件有效，不受别的组件干扰*/
    .box>view:last-of-type{
        background: #007AFF;
    }
    /* 奇数偶数-选择器 */
    .box>view:nth-of-type(2n-1){
        background: #007AFF;
    }
    /* 简写 奇数  :nth-of-type(odd) */
    .box>view:nth-of-type(odd){
        background: #007AFF;
    }
    /* 偶数   :nth-of-type(2n) */
    .box>view:nth-of-type(2n){
        background: #007AFF;
    }
    /* 简写  偶数  nth-of-type(even)  */
    .box>view:nth-of-type(even){
        background: #007AFF;
    }
    
    
</style>