【Uni-App社区小程序】010-uni-app的css3选择器

訾博ZiBo

发布于 2025-01-06 15:22:18

7700

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、选择器

1、官方文档

https://uniapp.dcloud.net.cn/frame?id=%e9%80%89%e6%8b%a9%e5%99%a8

2、代码演示

<template>
	<view>
		<view class="view-box" id="view" hover-class="view-box-hover">第一个view</view>
		<text>text组件</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/* .class .intro 选择所有拥有 class="intro" 的组件 */
	.view-box{
		width: 200upx;
		height: 200upx;
		background: #007AFF;
		color: #FFFFFF;
		margin: 100upx;
	}
	.view-box-hover{
		background: #FF0000;
	}
	/* #id #firstname 选择拥有 id="firstname" 的组件 */
	/* element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 */
	#view,text{
		background: #FFB400;
	}
	view{
		background: #09BB07;
	}
</style>

3、运行结果

二、CSS3选择器

（详细说明见代码注释）

1、代码演示

<template>
	<view>
		<view class="view-box" id="view" hover-class="view-box-hover">第一个view</view>
		<text>text组件</text>
		
		<view class="box">
			<!-- 我们在前面加了一个text，下面的.box>view:nth-child(3)就将2变成了白色，然而这不是我们想要的，解决方案在下面 -->
			<text>这是text</text>
			<view class="box-item">1</view>
			<view class="box-item">2</view>
			<view class="box-item">3</view>
			<view class="box-item">4</view>
			<view class="box-item">5</view>
			<view class="box-item">6</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/* .class .intro 选择所有拥有 class="intro" 的组件 */
	.view-box{
		width: 200upx;
		height: 200upx;
		background: #007AFF;
		color: #FFFFFF;
		margin: 100upx;
	}
	.view-box-hover{
		background: #FF0000;
	}
	/* #id #firstname 选择拥有 id="firstname" 的组件 */
	/* element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 */
	#view,text{
		background: #FFB400;
	}
	view{
		background: #09BB07;
	}
	.box{
		width: 100%;
		border: 1upx solid #333333;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.box-item{
		color: #FF0000;
		height: 200upx;
		width: 200upx;
		line-height: 200upx;
		font-size: 30upx;
		font-weight: bold;
		text-align: center;
	}
	/* 奇数，里面的odd也可以写成2n-1 */
	.box-item:nth-of-type(odd){
		background: #F0AD4E;
	}
	/* 偶数，里面的even也可以写成2n */
	.box-item:nth-of-type(even){
		background: #0A98D5;
	}
	/* 指定某个元素的样式 */
	.box>view:nth-child(3){
		background: #FFFFFF;
	}
	/* [解决方案] */
	.box>view:nth-of-type(3){
		background: #FFFFFF;
	}
	/* 我们将第一个和最后一个设置单独的样式 */
	/* 要明白child和type的区别 */
	/* .box>view:first-child{/* 这里如果存在其他组件则第一个无效 */
		/* background: #333333; */
	/* } */
	/* .box>view:last-child{
		background: #333333;
	} */
	.box>view:first-of-type{
		background: #333333;
	}
	.box>view:last-of-type{
		background: #333333;
	}
</style>