html - 更改了通用兄弟组合器以切换伪元素 : what is valid

Question

我遇到了经常提到的 WebKit 错误。以下解决方法似乎是 work in specific instances .但是我没有成功找到有效的组合。

开始(缩短。实际代码有 9 个子元素来创建轮播):

    input[value="1"]:checked ~ .container .carousel p:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }

我尝试了链接中建议的语法

    input[value="1"]:checked + .container + .carousel p:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }

但是，这会禁用切换操作。

* 更新 *
正如所指出的，我没有正确说明问题。

问题是复选框 hack 在 Android < 4.1 上不起作用(据我所知)。
使用 Chrome 或 Safari(Firefox 无法正常运行代码，并且单独呈现)the result of the code can be seen here

Answer 1

参见 jsFiddle Example .这对我有用

input[value="1"]:checked + .container .carousel p:nth-child(1) 
    { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }