-2 
 <html>
 <head>
    <style>
        #msg {
            visibility: hidden;
            position: absolute;
            left: 0px;
            top: 0px;
            width:100%;
            height:100%;
            text-align:center;
        }

        #msg div {
            width:33.3%;
            margin: 100px auto;
            background-color:#0CF;
            border:#000;
            padding:thick;
            text-align:center;
            width:15%;
            size:50;
        }
    </style>
 </head>
 <body>
    <div id="msg"><div>hello</div><a href="#" onClick="display()">Close</a></div>
    <a href="#" onclick="display()">click me</a>
 </body>
    <script>
        function display(){
            temp=document.getElementById("msg");
            temp.style.visibility=(temp.style.visibility=="visible")?"hidden":"visible";
        }
    </script>
</html>

这是我在互联网上找到的代码。我做了一些改变。谁能解释我为什么我们使用两个 div 标签？（一个在另一个里面）以及“#msg”和“#msg div”有什么区别？

4

9 回答 9

2

#msg将样式直接应用于具有 ID 的元素msg，#msg div并将这些样式应用于div该元素内的#msg元素。

至于为什么要使用两个 div，一个在另一个里面……你必须询问代码的原作者。没有具体的理由这样做。

于 2013-02-19T09:22:23.240 回答
1
  • #msg将适用于带有 . 的任何元素（应该是一个）id="msg"。
  • #msg div将样式应用于div元素内部的任何id="msg".
于 2013-02-19T09:24:19.697 回答
0

#msg用于具有 id 名称的 divmsg

#msg div适用于 div 中存在的#msgdiv。

于 2013-02-19T09:22:51.877 回答
0

#msg适用于 ID 为 msg 的 div 标签和 ID#msg div为 msg 的 div 标签中的 div 标签。

所以#msg你的情况将适用于这个html：

<div id="msg"><div>hello</div><a href="#" onClick="display()">Close</a></div>

并且#msg div唯一的：

<div>hello</div>
于 2013-02-19T09:22:59.083 回答
0

#msg表示它将在 id 的帮助下访问元素。因此添加到#msg 的样式将应用于

<div id="msg>

#msg div将访问上面 Div 中的 Div 标签

于 2013-02-19T09:23:04.770 回答
0

#msg是 ID 为 msg 的 Item 的选择器。IE<div id="msg">...</div>在您的代码中。

#msg div引用divid 为 msg 的元素中的元素。<div>hello</div>这在您的代码中匹配。

您可能想查看 CSS 选择器的教程（google it）。

于 2013-02-19T09:24:20.430 回答
0 
#msg { ... }

这是一个 ID 选择器，由#和 ID 文本表示。例如，它将针对与 ID 匹配的单个元素<div id="msg">

#msg div { ... }

这是一个后代选择器。它将针对所有 div 的后代#msg。后代可以位于父级之下的任何级别，这与>仅针对直接子级的子级选择器 ( ) 不同。

来自W3C 文档：

后代组合子 AB
形式为“A B”的选择器表示元素“B”，它是某个祖先元素“A”的任意后代。

can anyone explain me why we using two div tag ?

嵌套 div 是可接受且常见的做法，但是在您的代码示例中，文本将更合适地包含在<p></p>标签中，而不是在 div 中包含原始内容。

于 2013-02-19T09:27:12.267 回答
0

试着用一个例子来理解。

这是小提琴

HTML 代码：

<div id="msg">
  <div>
    stuff
  </div>
</div>

CSS 代码：

#msg {
  width: 100px
  height: 50px
  background: red;
}

#msg div {
  width: 60px;
  height: 30px;
  background: yellow;
}
于 2013-02-19T09:28:23.860 回答
-1

第一个样式“#msg”将应用于包含id为“msg”的div，第二个样式“#msg div”将应用于包含id为“msg”的div内的div，即它将应用于包含文本“hello”的 div。

于 2013-02-19T09:24:27.963 回答