CSS3中的target伪类怎样使用？

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

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<page>
<div id='test0'>
</div>
<div id='test1'>
</div>
<div id='test2'>
</div>
<div id='test3'>
</div>
</page>

<content>
<div id='menu'>
<ul id='menulist'>
<li><a id='list0' href='#test0'>test0</a></li>
<li><a id='list1' href='#test1'>test1</a></li>
<li><a id='list2' href='#test2'>test2</a></li>
<li><a id='list3' href='#test3'>test3</a></li>
</ul>
</div>
</content>

</body>
</html>

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的注释去掉之后，就不能用了，麻烦大家帮我看一下吧。

css3

html5 html 前端 web

阅读 11.9k

4 个回答

得票最新

水墨寒

1.1k72536

发布于
2014-08-25

w3school应该是你最先看的 CSS3 :target 选择器
在你的css文件中并没有定义 page div 的样式，所以你是看不到的
已经帮你实现仅供参考 http://codepen.io/Yunkou/full/fuHzC/
你问题中自述在自学中，刚开始学习的时候，请注意代码书写的规范，css书写规范和css属性书写顺序

Dont

7k163552

发布于
2014-08-27

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

<content>
<div id='menu'>
  <ul id='menulist'>
    <li id='test0'><a id='list0' href='#test0'>test0</a></li>
    <li id='test1'><a id='list1' href='#test1'>test1</a></li>
    <li id='test2'><a id='list2' href='#test2'>test2</a></li>
    <li id='test3'><a id='list3' href='#test3'>test3</a></li>
  </ul>
</div>
</content>

body {
  background: #87cfe6;
}
#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  #list0,
#test1:target  #list1,
#test2:target  #list2,
#test3:target  #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); 
}

:target 锚选择器 - 1楼有个w3c链接解释，意思是当url带有锚信息的时候(url中跟#后面的id)

对应html中的第一个匹配的id(一般html只解析第一个id)

如:url 是 xxx.com#abc
就只对id=abc生效
当然可以使用 #id:target 来设置不同id在:target下的效果。

所以 :target 的应用范围一般是tab选中态，以及强调锚状态的作用

以下代码可以简化。

#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); 
}

可以简化成

li:target{
    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); 
}