第一,如果你的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>
div是块,与photoshop的层大意差不多,它只是一个容器,而容器里的内容就是CSS构建的……而调用CSS样式表有几种形式。你可以看看CSS中文站的说明,一般表现为:div id=×××{1}或者.p{1}(1就是具体的CSS代码)……一般网页中是利用指向形式来指定CSS样式,所以你只会在后面看见{DIV ID="×××"}{/div}这样的指向代码而看不见它的CSS样式,因为它的样式表是放在另一个地方……
推荐你去看看《精通CSS.DIV网页样式与布局》,电驴上有视频教程,自己认真照着做一遍就基本入门了……认真学大概一星期就可以学完……