-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>

これは私がインターネットで見つけたコードです。いくつか変更を加えました。なぜ2つのdivタグを使用するのか（1つは別の内部にある）、「＃msg」と「#msgdiv」の違いは何ですか？

4

9 に答える 9

2

#msgmsgIDを持つ要素に直接スタイルを適用し、その要素内の要素に#msg divそれらのスタイルを適用します。div#msg

2つのdivを使用する理由として、またはその理由として、一方が他方の内部にある場合...コードの元の作成者に問い合わせる必要があります。それを行う特別な理由はありません。

于 2013-02-19T09:22:23.240 に答える
1
  • #msgが付いているすべての要素（1つである必要があります）に適用されますid="msg"。
  • #msg divdiv。を使用して要素内の任意のスタイルを適用しますid="msg"。
于 2013-02-19T09:24:19.697 に答える
0

#msgID名を持つdiv用ですmsg

#msg divdiv内に存在する#msgdiv用です。

于 2013-02-19T09:22:51.877 に答える
0

#msgid msgのdivタグと、idmsgのdivタグのdivタグに適用され#msg 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

#msgIDがmsgのアイテムのセレクターです。<div id="msg">...</div>コード内のiE 。

#msg divdivIDmsgを持つ要素内の要素への参照。これはあなたのコードと一致<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
「AB 」形式のセレクターは、ある祖先要素「A」の任意の子孫である要素「B」を表します。

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」は「msg」としてIDを含むdivに適用され、2番目のスタイル「#msgdiv」は「msg」としてIDを含むdiv内にあるdivに適用されます。テキスト「hello」を含むdivに適用されます。

于 2013-02-19T09:24:27.963 に答える