更改了通用兄弟组合器以切换伪元素：有效的是

Question

I've hit the frequently mentioned WebKit bug. The following workaround seems to work in specific instances . However I am not succeeding in finding the valid combinations.

Starting with (shortened. the actual code has 9 child elements to create a carousel):

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

I've attempted the syntax suggested in the link

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

However that disables the toggled action.

* update *
As pointed out, I did not properly specify the problem.

The issue is that the checkbox hack is not working on Android < 4.1 (as far as I can tell).
Using Chrome or Safari (Firefox is not properly functioning with the code, and is being rendered separately) the result of the code can be seen here

Answer 1

See jsFiddle Example . This worked for me

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