CSS过渡与"checked"黑客



我正试图通过使用"checked"破解来对这个例子做一些类似的事情

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代码,使标签标记位于输入标记之前。当我在底部移动输入时,效果停止工作。我该怎么解决这个问题?

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

正如chowey所说:

CSS选择器设计为易于(快速)在浏览器中实现。文档可以遍历一次,边遍历边匹配元素,而不需要向后调整匹配的

简单地说,您将不得不更改标记。你不能让CSS向后看。它只是向前看。

有关该主题的更多信息,请参阅此问题。

对于css,这是不可能的,因为您无法向上遍历,您使用的选择器只会查看下一个同级,而不会向后工作。要使其工作,您必须使用Javascript

相关内容

  • 没有找到相关文章