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里面，如果将 <page> 注释掉，#test0:target就可以用了，而我想保留 </page> <page> ，如果不用JS，只用#test0:target可以实现吗？ </page>
————更新————
为了方便表述，我把去掉page的放在了
http://codepen.io/anon/pen/xnmgK
这个网站上，这也是我想要的最终效果。但是将里面的page的注释去掉之后，就不能用了，麻烦大家帮我看一下吧。
自称天然呆
10 years, 2 months ago
Answers
我还是贴一下代码吧。
正如我在评论所说，
叔侄关系
的选择器貌似没找着。
退而求其次，换个
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);
}
NekoD主人
answered 10 years, 2 months ago
: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);
}
MrAllen
answered 10 years, 2 months ago
- w3school应该是你最先看的 CSS3 :target 选择器
- 在你的css文件中并没有定义 page div 的样式，所以你是看不到的
- 已经帮你实现仅供参考 http://codepen.io/Yunkou/full/fuHzC/
- 你问题中自述在自学中，刚开始学习的时候，请注意代码书写的规范，css书写规范和css属性书写顺序
暗D逆十字
answered 10 years, 2 months ago
