SCSS定义子级样式

CSS, HTML / 2024年10月19日 / hamster

<template>
	<view class="father">
		<view class="son">1</view>
		<view class="son">2</view>
		<view class="son">3</view>
		<view class="son">4</view>
		<view class="son">5</view>
		<view class="son">6</view>
		<view class="son">7</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>

.father{
	view{
		height: 40px;
		background-color: #ccc;
		
		//定义第一个子集
		&:first-child{
			background-color: green;
		}
		//定义最后一个子集
		&:last-child{
			background-color: blue;
		}
		//定义最后两个子集
		&:nth-last-child(-n+2),
		&:nth-last-of-type(-n+2){
			background-color: red;
		}
		//定义第三个子集
		&:nth-child(3){
			background-color: orange;
		}
		//定义第四个子集
		&:nth-of-type(4){
			background-color: yellow;
		}
                //从第2个子级开始到最后一个子级结束
                &:nth-child(n+2){
                }
	}
	// 定义子集样式
	&>div,
	& .son{
		height: 40px;
		background-color: white;
	}
	
}
</style>

###补充

&:nth-child(2n+1)  #定义奇数子级样式
&:nth-child(2n)    #定义偶数子级样式

scss