与子 Tailwind 交互时在父级上应用样式答案

【问题标题】：Apply styling on parent when interacting with child Tailwind与子 Tailwind 交互时在父级上应用样式
【发布时间】：2021-11-30 23:22:12
【问题描述】：

当复选框被选中时，我想移除父 div 的阴影。只有顺风就可以做到这一点吗？

<div class="shadow  peer">
   <input class="peer-checked:shadow-none"/>
   </div>

【问题讨论】：

【解决方案1】：

这无法通过 CSS 实现，因为您只能访问父级 -> 子级，而不是子级 -> 父级。

Tailwind 只能做 CSS 能做的事情：

元素元素：div p
选择 <div> 元素中的所有 <p> 元素

元素>元素：div > p
选择父元素为<div> 元素的所有<p> 元素

元素+元素：div + p
选择紧跟在<div> 元素之后的第一个<p> 元素

element1~element2：p~ul
选择前面有 <p> 元素的每个 <ul> 元素

要更改父类，您需要一个 JavaScript 实现来添加：

<div class="shadow">
   <input type="checkbox" onchange="this.parentNode.classList.toggle('shadow')"/>
</div>

您应该在 JS 组件中执行此操作，而不是通过内联 JavaScript。

【讨论】：