在自学HTML5和CSS3的时候遇到了一个问题:
HTML代码如下:
PageCSS代码如下:
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的注释去掉之后,就不能用了,麻烦大家帮我看一下吧。