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

它们是两个不同的选择器：

• div#navbar选择div一个id_navbar
• div #navbar选择具有 an 的元素，该元素id是元素navbar的后代div。

基本上，第一个匹配：

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

但第二个匹配：

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

Answer 2

div#navbar寻找一个 div id'd navbar

div #navbar在所有 div 中查找 id'd navbar

为了解释，尽我所能，这些东西被称为 CSS 选择器。你可以用不同的方式指定选择器；在第一个中，您有一堆选择器。这会寻找符合该描述的元素。

每次你有一个空间时，就像“现在开始寻找最后一个选择器中（是子级）的元素。

这就是为什么 id 为 navbar 的 div 没有空格 ( div#navbar) ，而带空格 ( ) 的 div在div中div #navbar查找 id navbar 。

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 内部的图像高度为 100 像素。