纯css加伪类实现关闭提示创窗口

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>单选按钮实现窗口关闭布局</title>
<meta name="author" content="" />
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
.first{
    position:relative;
    background:#0f0;
    width:500px;
}
.chk_1 {
    display: none;
} 

.chk_1 + label {
    width:30px;
    height:30px;
    text-align:center;
    line-height:30px;
    background-color: #FFF;
    background: rgba(255, 0, 107, 0.83);
    padding: 5px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index:2;
} 

.chk_1:checked + label {
   display:none;
} 

.chk_1:checked + label:after {
    display:none;
}
.second{
    position:absolute;
    z-index:1;
    width:500px;
    height:300px;
    background:#FF00DF;
}
.chk_1:checked ~ div{
    display:none;
}
</style>
</head>
<body>
<div>
    <ul>
        <li class='first'>
            <input type="checkbox" id="checkbox_a1" class="chk_1" />
            <label for="checkbox_a1">X</label>
            <div class='second'></div>
        </li>
    </ul>
</div>
</form>
</body>
</html>