group 和 peer 使用限制
group 使用注意事项
在 tailwindcss
中,我们常常会这样写:
<div class="group">
<view class="bg-pink-400 group-hover:bg-yellow-400">
group tapped
</view>
</div>
这样在最外层的 div
进入 hover
状态时,内部的子元素中的 group-hover
就会生效,从而改变样式。
然而,在小程序中,伪类 :hover
是不起作用的,取而代之的是 hover-class
这样一个属性,所以这种情况我们可以这么写:
<view class="group" hover-class="tapped">
<view class="bg-pink-400 group-[.tapped]:bg-yellow-400">
group tapped
</view>
</view>
这样在 group
进入 hover
状态时,bg-yellow-400
就会生效了。
相关 issue:#14
peer 使用注意事项
我们一般使用 peer
来标记一个元素,再使用各种 peer-*
来让它后续兄弟节点的样式生效。这些主要生成大量包含 ~