带有“已检查”技巧的 CSS 过渡 [重复]

Posted 2023-03-06

【中文标题】带有“已检查”技巧的 CSS 过渡 [重复]

【英文标题】：CSS transitions with the "checked" hack [duplicate]

【发布时间】：2016-04-09 23:41:43

【问题描述】：

我正在尝试通过使用“checked”hack 对这个示例做类似的事情

input[type=checkbox]:checked ~ label .box  
  opacity:0;
  -webkit-transform   :scale(0) rotate(-180deg);
  -moz-transform      :scale(0) rotate(-180deg);
  transform           :scale(0) rotate(-180deg);

http://codepen.io/anon/pen/KVWWjy

但是，我需要更改 html 代码，使 label 标签位于 input 标签之前。当我在底部移动输入时，效果停止工作。我该如何解决这个问题？

【问题讨论】：

我什至不知道前一个兄弟是什么但好吧......

好吧，可惜他们关闭了它。我有你的答案

@LOTUSMS 可以发给我吗？

不知道我们可以在这里 PM 哈哈。私信我，我会回复...我猜你每天都会学到新东西

我的错。估计做不到

【参考方案1】：

CSS 中没有 previous sibling 选择器。如果有，CSS 会慢很多。关于这个问题已经有很多争论，而且在可预见的未来都不会发生。

正如chowey 说得好：

CSS 选择器被设计为易于（快速）为浏览器实现。文档可以被遍历一次，在你去的时候匹配元素，而无需向后调整匹配

简单地说，您必须更改您的标记。你不能让 CSS 向后看。它只是向前看。

有关该主题的更多信息，请参阅this question。

【参考方案2】：

对于css，这是不可能的，因为您无法向上遍历，您使用的选择器只会查看它向后工作的下一个兄弟姐妹。为此，您必须使用javascript。