uniapp css3选择器

先看图

不难发现第四个 样式失效 为什么呢？ 多了一个 text组件

	<view class="wrap1">
			
			<text></text>
			    <view class="">1</view>
				<view class="">2</view>
				<view class="">3</view>
				<view class="">4</view>
		</view>
        
        
        
.wrap1{
	width:500rpx;
	height: 500rpx;
	background-color: #4CD964;
}
.wrap1>view:nth-child(1){
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
}
.wrap1>view:nth-child(2){
	width: 100rpx;
	height: 100rpx;
	background-color: red;
}
.wrap1>view:nth-child(3){
	width: 100rpx;
	height: 100rpx;
	background-color: blue;
}
.wrap1>view:nth-child(4){
	width: 100rpx;
	height: 100rpx;
	background-color: yellow;
}

要实现 第四个盒子变成黄色 这个时候就要用到 另外一个选择器：nth-of-type

.wrap1>view:nth-of-type(1){
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
}
.wrap1>view:nth-of-type(2){
	width: 100rpx;
	height: 100rpx;
	background-color: red;
}
.wrap1>view:nth-of-type(3){
	width: 100rpx;
	height: 100rpx;
	background-color: blue;
}
.wrap1>view:nth-of-type(4){
	width: 100rpx;
	height: 100rpx;
	background-color: yellow;
}

.wrap1>view:first-child{
	width: 100rpx;
	height: 100rpx;
	background-color: pink;
}
.wrap1>view:last-child{
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
}

同样换成另外一种：

.wrap1>view:first-of-type{
	width: 100rpx;
	height: 100rpx;
	background-color: pink;
}
.wrap1>view:last-of-type{
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
} 

奇偶选择器

/* 奇偶选择器 */
.wrap1>view:nth-child(2n-1){
	width: 100rpx;
	height: 100rpx;
	background-color: pink;
}
.wrap1>view:nth-child(2n){
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
}

.wrap1>view:nth-child(odd){
	width: 100rpx;
	height: 100rpx;
	background-color: red;
}
.wrap1>view:nth-child(even){
	width: 100rpx;
	height: 100rpx;
	background-color: #555555;
}

猜想：

• oll -》偶数？
• even -》奇数？

但网上却是刚刚相反！！！ 原来上面写成了 nth-child（oll）

结论：

• oll -》奇数

• even -》偶数

• :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。可以搭配oll 和even使用 （推荐）

• :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。