uni-app中的css3选择器

最新推荐文章于 2025-09-24 15:11:42 发布

原创最新推荐文章于 2025-09-24 15:11:42 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #css选择器 #css3选择器 #奇偶选择器

uni-app修炼之路专栏收录该内容

8 篇文章

订阅专栏

本文深入解析uni-app中的选择器使用方法，包括基础选择器如.class、#id及元素选择器，复合选择器如element,element，伪元素选择器如::after、::before等。特别介绍了奇偶选择器的使用技巧，通过实例代码展示了如何为不同类型的组件应用样式。

uni-app修炼之路（八）

选择器

参考官方文档：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>