微信小程序开发——class和style的区别

本文通过实例探讨了在小程序开发过程中遇到的CSS样式与内联style属性冲突的问题,并分享了解决方案。文章解释了class与style在样式优先级上的区别,帮助开发者更好地理解样式加载机制。

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

    因为在开发小程序时,只有部分在做毕业设计时候的前端经验,很多问题都是遇到后才了解到。

    在制作前端的过程中遇到了修改css样式不起作用的问题。因为代码是从网络上拷贝下来的,最开始如下:

<button class='tr' bindtap='modalinput' style="width:140rpx" data-value='{{item}}'>{{item.classnames}}</button>

    我们可以看到,里面不仅仅有css样式tr,而且还有一句style="widht:140rpx"的语句,最开始的时候我没有留意style,

为了修改使得button的外形更为美观,我对css中的tr进行了widht的修改。

    在测试的过程中发现,无论给他设置为什么,所对应的button按钮没有发生一点变化,这才让我注意到style="widht:140rpx"这句话,印象中,前端读取样式的时候一般是就近原则,因为平时写全局app.css和当前页面的css的时候会注意到这些。

    所以,class和style的最后的目的是一样的,只不过class是对当前容器命名后,在css页面或者wxss页面进行样式的编写,而style是直接在页面语句中的语句中进行编写,在程序执行的时候,style>class;


    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值