CSS转换为“已检查”的黑客攻击

Question

我正在尝试使用“已检查”黑客

执行与此示例类似的操作

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标签位于输入标签之前。当我在底部移动输入时，效果停止工作。我该如何解决这个问题？

Answer 1

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

正如chowey所说的那样：

  

CSS选择器旨在为浏览器轻松（快速）实现。文档可以遍历一次，随时匹配元素，无需向后调整匹配

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

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

Answer 2

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