uni-app中的css3选择器

参考官方文档：https://uniapp.dcloud.io/frame?id=%e9%80%89%e6%8b%a9%e5%99%a8

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=“intro” 的组件
#id	#firstname	选择拥有 id=“firstname” 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅微信小程序和App生效
::before	view::before	在 view 组件前边插入内容，仅微信小程序和App生效

注意：

在 uni-app 中不能使用 * 选择器。
page 相当于 body 节点，例如：

<!-- 设置页面背景颜色 -->
page {
  background-color:#ccc;
}

微信小程序自定义组件中仅支持 class 选择器

经常用到的奇偶选择器，代码示例：

<template>
	<view>
		
		<view class="box">
			<text>text组件</text>
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
			<view>5</view>
			<view>6</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
			//title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.box{
		width: 200upx;
		height:200upx;
		background:#09BB07;
		color: #FFFFFF;
		margin: 100upx;
	}
	.box view{
		font-size: 40upx;
	}
	/*box中奇数的view*/
	.box>view:nth-of-type(odd){
		background-color: red;
	}
	/*box中偶数的view*/
	.box>view:nth-of-type(even){
		background-color: pink;
	}
	
</style>

演示效果：