css这么用a标签把一个div关闭

html-css09

css这么用a标签把一个div关闭,第1张

第一,如果你的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网页样式与布局》,电驴上有视频教程,自己认真照着做一遍就基本入门了……认真学大概一星期就可以学完……