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

html-css028

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>

不能,因为你onClick="lggood.style.display='none'bgDiv.style.display='none'"

他都不知道你lggood和bgDIV是啥,你要加一段JS指定才能:还有,你代码中没有bgDIV标签

这句要改成:

<span class="t2" title="关闭" onClick="lggood.style.display='none'">X</span>

<script>

var lggood=document.getElementsByClassName("lggood")[0]

</script>

HTML 与 XHTML 之间的差异

在 HTML 中,<link>标签没有结束标签。

在 XHTML 中,<link>标签必须被正确地关闭。

这要看你的<!DOCTYPE>设置了。

<!DOCTYPE>声明位于文档中的最前面的位置,处于 <html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。HTML Strict DTD如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">HTML Transitional DTDTransitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">Frameset DTDFrameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">

XHTMLXHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。XHTML Strict DTD如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTDTransitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 XHTML 的呈现特性时,请使用此类型:<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD当您希望使用框架时,请使用此 DTD!<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如需检查你是否编写了带有正确 DTD 的合法 XHTML 文档,您可以把您的 XHTML 页面链接到一个 XHTML 验证器。