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

代码如下所示。JSIDLE链接：

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

• div#navbar

  选择具有

  navbar

  的

  id

  的

  div

• div#navbar

  选择id为

  navbar

  的元素，该元素是

  div

  元素的后代

基本上，第一个匹配：

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

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

你好

但第二个匹配：

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

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

div#navbar

查找div id的navbar

div#navbar

在所有div中查找id为navbar的内容

尽我所能解释一下，这些东西叫做CSS选择器。您可以用不同的方式指定选择器；在第一个示例中，您有一组选择器。这将查找符合该描述的元素

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

---

这就是为什么没有空格（

div#navbar

）用于id为navbar的div，而空格（

div#navbar

）用于在div中查找id为navbar的div。

这可以在嵌套标记或元素时使用。例如

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

如果你只使用

#base {
    //styles
}

容器外部的基ID也将被调用。逻辑

为了更准确地理解它，这里有一个例子

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

“test”类内部、“div3”ID内部、“div2”ID内部、“div1”ID内部的图像高度将为100px