顺风css：有没有办法瞄准下一个兄弟姐妹？ [英] Tailwind CSS : Is there a way to target next sibling?

问题描述

我有一个带有如下标签的无线输入。输入是隐藏的，标签被用来制作一个视觉上有吸引力的圆圈，用户可以在上面点击。

<input id="choice-yes" type="radio" class="opacity-0 w-0 fixed"/>
<label for="choice-yes" class="transition  duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center">Yes</label>

当用户单击标签时，输入将被选中。我正在努力想办法瞄准这一点，这样我就可以给这个标签一种不同的风格。

这可以在纯CSS中使用下一个同级选择器来实现。

input[type="radio"]:checked + label {
  background-color: #bfb !important;
  border-color: #4c4 !important;
}

Teswind.css中是否有类似的内容可供我使用？

推荐答案

对于希望实现此功能的用户，可以使用实时模式(TailWind Css v2.1+)sibling selector variant。

这篇关于顺风css：有没有办法瞄准下一个兄弟姐妹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！