CSS优先级的问题
直接上码，CSS是这样的（注意顺序）：.w-500 {
width: 500rpx;
}
.w-600 {
width: 600rpx;
}
HTML这样的：
<view class="w-600 h-600">box1</view>
有时我通过一些事件（例如hover-class），增加一些class，使其变成这样：
<view class="w-600 h-600 w-500">box1</view>
我们期望是按照HTML中class的书写顺序，优先使用w-500使元素的宽度变成500。
但经过测试，解释器并不会考虑HTML中的书写顺序，而是只考虑CSS中的书写顺序，导致元素的宽度仍然是600。
我现在能够想到的解决方案是数据绑定，然后还有一个JS的hover事件去改变数据，这明显很繁琐。
这种情况，各位大佬什么更好的解决办法，谢谢。 直接把需要hover后的class里面属性加上 !important 就行了 不管class名称在前在后 都会优先使用你的hover那个class的内容 一大杯奶茶呀 发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了 不管class名称在前在后 都会优先使用你的hover那 ...
后加的class并不固定，就是说所有类都可能被拿来添加。
所有这个方法应该不行。 一大杯奶茶呀 发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了 不管class名称在前在后 都会优先使用你的hover那 ...
如果这样，是不是一定要动用JS{:301_983:} cqwcns 发表于 2022-4-28 10:42
如果这样，是不是一定要动用JS
你直接把demo和需求贴出来 我看看 你可以js移除w600，添加w500样式 c;lass直接name标识呗，
name:hover增加or修改样式；
<head>
<style>
.box{
width: 600px;
}
.box:hover{
width: 700px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
!important一般是用来调试属性的。
至于要自定义更多的事件操作，就离不开js支持了。 一大杯奶茶呀 发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了 不管class名称在前在后 都会优先使用你的hover那 ...
对啊 加important 建议替换类名，不是追加类名。调整一下css的书写逻辑，公用的样式写在一个class里，变化的写在不同的class里，切换时替换对应的class即可 建议看看css的权重说明
页:
[1]
2