uni-app中的css3選擇器使用

css3選擇器使用

1.頁面佈局

<view>
	<view class="box">
		<text>text組件</text>
		<view>我是一號</view>
		<view>我是二號</view>
		<view>我是三號</view>
		<view>我是四號</view>
		<view>我是五號</view>
	</view>
	</view>

顯示效果

1.給Text元素添加樣式

.box {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    #view2,text{
    	background: yellow;
    } 

2.給 view 添加樣式

 .box view{
    	font-size: 40upx;
        color: #8A6DE9;
    }

3.想改變某一個view 樣式

 .box>view:nth-child(1){
    	background: #09BB07;
    }
    .box>view:nth-child(2){
    	background: red;
    }
    .box>view:nth-child(3){
    	background: yellow;
    }

注意：使用nth-child（n）時候，因爲第一個元素是text，樣式不生效。要使用nth-of-type

使用nth-of-type 修改樣式

 .box>view:nth-of-type(1){
    	background: #09BB07;
    }
    .box>view:nth-of-type(2){
    	background: red;
    }
    .box>view:nth-of-type(3){
    	background: yellow;
    } 

注意：first-child效果與nth-child（n）效果類似，第一個爲文本時候，樣式不生效

 .box>view:first-child{
   	background: blue;
   }
   .box>view:last-child{
   	background: red;
   } 

first-of-type 樣式：

.box>view:first-of-type{
   	background: blue;
   }
   .box>view:last-of-type{
   	background: red;
   }

4.奇數偶數間隔樣式設置方式

方式1：

 /* 偶數 */
 .box>view:nth-of-type(even){
 	background: red;
    color: #fff;
 }
 /* 奇數 */
 .box>view:nth-of-type(odd){
 	background: blue;
    color: #fff;
 }

方式2：

 .box>view:nth-of-type(2n-1){
	background: red;
}
  
.box>view:nth-of-type(2n){
	background: blue;
}