所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。
定义和用法
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta name="referrer" content="always">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../public/css/hb_wap.css">
<title>less 学习</title>
</head>
<body>
<style>
#test:target{
background-color: lightblue;
}
#nav{
display: none;
}
#nav:target{
display: block;
}
#nav:target .btn_close{
display: inline-block;
}
/* 默认是隐藏关闭按钮 */
#nav .btn_close{
display: none;
}
/* 默认是隐藏关闭按钮 */
#nav:target .btn_close{
display: block;
}
.btn{
position: absolute;
left: 60px;
top: 0px;
}
</style>
<div class="relative">
<a href="#nav" class="btn_open btn" style="background-color: red">显示</a>
<ul class="list_unstyled" id="nav">
<li>张三1</li>
<li>张三2</li>
<li>张三3</li>
<li>张三4</li>
<a href="#sss" class="btn_close btn" style="background-color: blue">关闭</a>
</ul>
</div>
</body>
</html>
