html - div＃navbarとdiv #navbarの結果が異なるのはなぜですか？

Question

コードは以下のとおりです。Jsfiddleリンク：http ：//jsfiddle.net/tLXSt/ 。

 <div id="navbar">

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a class="fb" href="menu.html">Menu</a></li>

</ul>

</div>

Answer 1

それらは2つの異なるセレクターです。

• div#navbarのを選択しdivますidnavbar
• div #navbar要素の子孫であるidの要素を選択します。navbardiv

基本的に、最初のものは一致します：

<div id="navbar">
  Hello
</div>

しかし、2番目のものは一致します：

<div>
  <img src="foo.png" id="navbar" />
</div>

Answer 2

div#navbardivid'dnavbarを探します

div #navbarすべてのdiv内でナビゲーションバーを識別したものを探します

説明すると、私ができる限り、これらのものはCSSセレクターと呼ばれます。セレクターはさまざまな方法で指定できます。最初のものでは、たくさんのセレクターが一緒にあります。これにより、その説明に適合する要素が検索されます。

スペースがあるたびに、「最後のセレクターにある（の子である）要素を探し始めます。

そのため、 id navbardiv#navbarのdivにはスペース（）がなく、スペース（ ）の場合はdiv内div #navbarのidnavbarを検索します。

Answer 3

これは、ネストされたタグまたは要素がある場合に使用できます。例えば。

<div id="container">
    <div id="base"> <!-- i want to select this for my css instead of... -->
    </div>
</div>
<div id="base"> <!-- this -->
</div>

コンテナ内のIDベースを選択したいので、使用します...

#container #base {
    // styles
}

のみ使用する場合...

#base {
    //styles
}

コンテナ外のベースIDも呼び出されます。論理。

それで、それをより正しく理解するために。これが例です

#div1 #div2 #div3 .test img {
    height:100px;
}

'test'クラス内、'div3' ID内、'div2' ID内、'div1'ID内の画像の高さは100pxになります。