CSS 使用 "checked" 技巧进行转换

Question

我正在尝试使用 "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 标记之前。当我移动底部的输入时，效果停止工作。我该如何解决这个问题？

Answer 1

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

chowey 说得很好：

CSS selectors are designed to be easy (fast) to implement for the browser. The document can be traversed once, matching elements as you go, with no need to ever go backward to adjust a match

简而言之，您必须更改标记。你不能让 CSS 向后看。它只向前看。

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

Answer 2

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

CSS 使用 "checked" 技巧进行转换

CSS transitions with the "checked" hack

css

css-transitions