CSS优先级的问题

cqwcns · 发表于 2022-4-28 10:17

直接上码，CSS是这样的（注意顺序）：

[CSS] 纯文本查看 复制代码

.w-500 {
    width: 500rpx;
}

.w-600 {
    width: 600rpx;
}

HTML这样的：

[HTML] 纯文本查看 复制代码

<view class="w-600 h-600">box1</view>

有时我通过一些事件（例如hover-class），增加一些class，使其变成这样：

[HTML] 纯文本查看 复制代码

<view class="w-600 h-600 w-500">box1</view>

我们期望是按照HTML中class的书写顺序，优先使用w-500使元素的宽度变成500。
但经过测试，解释器并不会考虑HTML中的书写顺序，而是只考虑CSS中的书写顺序，导致元素的宽度仍然是600。

我现在能够想到的解决方案是数据绑定，然后还有一个JS的hover事件去改变数据，这明显很繁琐。

这种情况，各位大佬什么更好的解决办法，谢谢。

一大杯奶茶呀 · 发表于 2022-4-28 10:32

直接把需要hover后的class里面属性加上 !important 就行了不管class名称在前在后都会优先使用你的hover那个class的内容

cqwcns · 发表于 2022-4-28 10:41

一大杯奶茶呀发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了不管class名称在前在后都会优先使用你的hover那 ...

后加的class并不固定，就是说所有类都可能被拿来添加。

所有这个方法应该不行。

cqwcns · 发表于 2022-4-28 10:42

一大杯奶茶呀发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了不管class名称在前在后都会优先使用你的hover那 ...

如果这样，是不是一定要动用JS

一大杯奶茶呀 · 发表于 2022-4-28 10:44

cqwcns 发表于 2022-4-28 10:42
如果这样，是不是一定要动用JS

你直接把demo和需求贴出来我看看

xiaohuihui88 · 发表于 2022-4-28 10:48

你可以js移除w600，添加w500样式

灿烂的小居 · 发表于 2022-4-28 10:52

c;lass直接name标识呗，
name:hover增加or修改样式；

[HTML] 纯文本查看 复制代码

<head>
  <style>
    .box{
      width: 600px;
    }
    .box:hover{
      width: 700px;
    }
  </style>
</head>
<body>
  <div class="box">
    box
  </div>
</body>

!important一般是用来调试属性的。
至于要自定义更多的事件操作，就离不开js支持了。

centos7 · 发表于 2022-4-28 11:35

一大杯奶茶呀发表于 2022-4-28 10:32
直接把需要hover后的class里面属性加上 !important 就行了不管class名称在前在后都会优先使用你的hover那 ...

对啊加important

知心 · 发表于 2022-4-28 12:13

建议替换类名，不是追加类名。调整一下css的书写逻辑，公用的样式写在一个class里，变化的写在不同的class里，切换时替换对应的class即可

Todd · 发表于 2022-4-28 13:16

建议看看css的权重说明

帐号		自动登录	找回密码
密码			注册[Register]

[求助] CSS优先级的问题

免费评分