记录解决在uniapp中使用:last-child不生效的问题

最新推荐文章于 2024-04-07 21:14:44 发布

4sthuajuan

最新推荐文章于 2024-04-07 21:14:44 发布

阅读量1k

点赞数 6

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/hua4st/article/details/136217145

版权

文章讲述了在HTML中使用CSS`:last-child`选择器时遇到的问题，即所有行元素变为红色而非仅最后一个。解决方法是将`navigator`元素包裹在额外的`view`层，确保每个`navigator`元素独立应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在某学习视频中使用如下代码设置:last-child

html

            <view class="dulu">
				<navigator url="#" class="row" >456</navigator>
				<navigator url="#" class="row" >167523</navigator>
				<navigator url="#" class="row" >176823</navigator>
            </view>

css

    .dulu{
			.row{
				color: pink;
				&:last-child{
					color: red;
				}
			}
			
		}

此时最后一个navigator并没有变成红色，而是所有的都变为了红色

解决办法：

在navigator外包裹一层view

			<view class="dulu">
				<view class="row">
					<navigator url="#" class="" >123123</navigator>
				</view>
				<view class="row">
					<navigator url="#" class="" >456546</navigator>
				</view>
				<view class="row">
					<navigator url="#" class="" >456654</navigator>
				</view>
			</view>