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选择id navbar为div元素后代的元素。

基本上，第一个匹配：

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

但第二个匹配：

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

Answer 2

div#navbar查找div id'd导航栏

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

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

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

这就是为什么没有空格（div#navbar）为div 与 id导航条和空格（div #navbar）在中找到一个id导航栏强>一个div。

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 base，所以我将使用...

#container #base {
    // styles
}

如果您只使用...

#base {
    //styles
}

也会调出容器外部的基本ID。逻辑。

所以要更恰当地理解它。这是一个例子

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

'test'类中的图像，'div3'ID内，'div2'ID内，'div1'ID内部的高度为100px。

为什么div＃navbar和div #navbar有不同的结果？

3 个答案: