第一，如果你的a标签是在div里面的，那预计是不成的，因为css没有父选择器。
第二，如果你的a标签是和div同级的，那可以做到的，但是不能用a标签，因为a标签的伪类里面没有一个持久的状态，相比之下checkbox更好用，因为它有checked状态，可以用这个状态去标识弹出框是弹出还是关闭
代码如下
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>test</title>
<style>
body {
background-color: gray
}
.pop-up {
position: absolute
left: 50%
top: 50%
height: 200px
width: 200px
transform: translate(-50%, -50%)
background-color: white
}
.btn-close:checked ~ .pop-up {
display: none
}
</style>
</head>
<body>
<input id="checkbox" type="checkbox" class="btn-close" />
<label for="checkbox">toggle按钮</label>
<div class="pop-up">
这个是弹出框
</div>
</body>
</html>
一个很常见的网站提示栏，一般常用于首页，会给出一行提示文字，用方框框起来，再附上一个关闭按钮，配上JS脚本，这样就实现了一个可以关闭的提示框，实际上代码是超简单的，但是功能却是很实用。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>可关闭的提示框</title>
<style>
#tips
{
position:relative
margin:0 auto
border:1px solid
#FA9150
padding:5px 10px 5px
10px
width:96%
background-color:#FEF1E9
line-height:160%
font-size:12px
}
#close
{
position:absolute
top:7px
right:8px
}
</style>
<script>
function
Close() {
document.getElementById("tips").style.display =
"none"
}
window.onload = function()
{
document.getElementById("tips").onclick =
Close
}
</script>
</head>
<body>
<p
id="tips">
![Python和MATLAB的小括号( )、中括号[ ]和大括号{}](/aiimages/Python%E5%92%8CMATLAB%E7%9A%84%E5%B0%8F%E6%8B%AC%E5%8F%B7%28+%29%E3%80%81%E4%B8%AD%E6%8B%AC%E5%8F%B7%5B+%5D%E5%92%8C%E5%A4%A7%E6%8B%AC%E5%8F%B7%7B%7D.png)
