关于css样式顺序前后定义的问题

背景 在开发一个盲盒交友的小程序前段时候 按下按钮发现不能实现按钮转换背景颜色

<view class="choose" hidden="{{hidden}}" style="flex-direction:row;" show="false">
    
    <button class="boys" bindtap="chooseboys" hover-class="hover">抽取小哥哥 </button>
  <image src="/pages/image/image21.jpg"></image>
  
   <button class="girls" bindtap="choosegirls" hover-class="nh"  >抽取小姐姐</button>
  </view>

绑定了nh 但是却迟迟点击小姐姐的按钮不会改变颜色
原来在css里
一开始把nh写了girls之上面了 这样选择器就选择不到nh了
查找答案后发现也是这个问题,不过能自己想出来 真的好开心啊啊啊啊
https://developers.weixin.qq.com/community/develop/doc/d269e8477e88cf81f178a3e651e65d6f

.boys{
  color: bisque;
  background-color: darkturquoise;
  
}
.girls{
  color: bisque;
  background-color: rgb(209, 0, 181);
}
.hover{
  background-color: rgb(46, 10, 252);
}
.nh{
  background-color: red
}