html5 targe选择器,CSS3中的target伪类怎样使用？

在自学HTML5和CSS3的时候遇到了一个问题：

HTML代码如下：

Page

• test0
• test1
• test2
• test3

CSS代码如下：

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;

}

#menulist a{

display: block;

background: rgba(255,255,255,0.9);

line-height: 50px;

padding: 0px 20px;

margin-bottom: 6px;

box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

}

#menulist a:hover {

background: #ddd;

position:relative;

left:20%;

box-shadow:0 -8px 8px -8px rgba(0, 0, 0, 0.5),0 8px 8px -8px rgba(0, 0, 0, 0.5);

transition:all 0.3s ease-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 -8px 8px -8px rgba(0, 0, 0, 0.5),0 8px 8px -8px rgba(0, 0, 0, 0.5);

}

问题是这样的，在HTML里面，如果将注释掉，#test0:target就可以用了，而我想保留，如果不用JS，只用#test0:target可以实现吗？

————更新————

为了方便表述，我把去掉page的放在了http://codepen.io/anon/pen/xnmgK这个网站上，这也是我想要的最终效果。但是将里面的page的注释去掉之后，就不能用了，麻烦大家帮我看一下吧。