Question

 <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”之间有什么区别？

Answer 1

#msg会将样式直接应用于ID为msg的元素，而#msg div会将这些样式应用于div元素内的#msg元素。

作为或为什么要使用两个div，一个在另一个内...你必须询问原始作者的代码。没有具体的理由这样做。

Answer 2

#msg将适用于id="msg"的任何元素（应该是一个）。
#msg div会将样式应用于div元素内的任何id="msg"。

Answer 3

#msg适用于ID为msg

的div

#msg div适用于#msg div内的div。

Answer 4

#msg适用于id为msg和#msg div的div标记，div标记中的div标记为id msg。

因此，您的案例中的#msg将适用于此html：

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

和#msg div仅限于：

<div>hello</div>

Answer 5

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

<div id="msg>

#msg div 将访问上面Div内的Div标记

Answer 6

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

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

您可能希望查看CSS选择器的tutorial（谷歌）。

Answer 7

#msg { ... }

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

#msg div { ... }

这是一个后代选择器。它将针对作为#msg后代的所有div。后代可以位于父级之下的任何级别，而不像子选择器（>），它只会直接针对直接子级。

来自W3C docs：

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

can anyone explain me why we using two div tag ?

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

Answer 8

尝试通过一个例子来理解。

这是fiddle

HTML code：

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

CSS代码：

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

#msg div {
  width: 60px;
  height: 30px;
  background: yellow;
}

Answer 9

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

样式标记中“#msg”和“#msg div”之间的区别是什么？

9 个答案: