猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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;
    }
    #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的注释去掉之后，就不能用了，麻烦大家帮我看一下吧。
    
			
    
				
    小唯快跑啊
    
				
    浏览 536回答 2
    
			
    
			
			
		

		
    

		
    
		
    
			
			
    2回答
    
			
    
				
				
    
					
					
    摇曳的蔷薇
    
					
    我还是贴一下代码吧。正如我在评论所说，叔侄关系的选择器貌似没找着。退而求其次，换个target大叔，就找a他爸li，父子选择器总有吧。test0test1test2test3body{background:#87cfe6;}#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#list0,#test1:target#list1,#test2:target#list2,#test3:target#list3{background:#f0f;position:relative;left:20%;box-shadow:0-8px8px-8pxrgba(0,0,0,0.5),08px8px-8pxrgba(0,0,0,0.5);}
    
					
    
						
    
							
							
						
    
						
    0
    
					
    
				
    
				
			
    
			
		
    
		
    
			
			打开App，查看更多内容
		
    
	
	
    
	随时随地看视频慕课网APP

    
	
	
	
    
		
    相关分类
    
		
    
			
			
    
			
				 JavaScript