CSS3中的target伪类怎样使用？

Question

在自学HTML5和CSS3的时候遇到了一个问题：HTML代码如下：Pagetest0test1test2test3CSS代码如下：html,body{height:100%;}body{width:100%;background:#87cfe6;overflow:hidden;}#menulist{margin-top:20px;width:235px;display:block;list-style:none;z-index:3;}#menulista{display:block;background:rgba(255,255,255,0.9);line-height:50px;padding:0px20px;margin-bottom:6px;box-shadow:1px1px2pxrgba(0,0,0,0.2);}#menulista:hover{background:#ddd;position:relative;left:20%;box-shadow:0-8px8px-8pxrgba(0,0,0,0.5),08px8px-8pxrgba(0,0,0,0.5);transition:all0.3sease-in-out;}#test0:target~content#menu#menulist#list0,#test1:target~content#menu#menulist#list1,#test2:target~content#menu#menulist#list2,#test3:target~content#menu#menulist#list3{background:#f0f;position:relative;left:20%;box-shadow:0-8px8px-8pxrgba(0,0,0,0.5),08px8px-8pxrgba(0,0,0,0.5);}问题是这样的，在HTML里面，如果将注释掉，#test0:target就可以用了，而我想保留，如果不用JS，只用#test0:target可以实现吗？————更新————为了方便表述，我把去掉page的放在了http://codepen.io/anon/pen/xnmgK这个网站上，这也是我想要的最终效果。但是将里面的page的注释去掉之后，就不能用了，麻烦大家帮我看一下吧。

Answer 1

我还是贴一下代码吧。
正如我在评论所说，叔侄关系的选择器貌似没找着。
退而求其次，换个target大叔，就找a他爸li，父子选择器总有吧。
test0
test1
test2
test3