前端 - CSS3中的target伪类怎样使用？-PHP中文网问答

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

HTML代码如下：

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

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

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

<content> <p 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> </p> </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); }

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

全部回复(4)

大家讲道理2017-04-17 11:13:58 4楼

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

赞 +0

添加回复

怪我咯2017-04-17 11:13:58 3楼

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

阿神2017-04-17 11:13:58 2楼

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

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

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

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

以下代码可以简化。

可以简化成

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