如何在另一个<div>标签中选择一个<div>标签？

Question

我有以下内容:

<div id="view">
    <div id="navbar">
        Placeholder Text
    </div>

</div>

我想给“navbar”中的文本添加样式，但是在样式表中，文档中还有另一个名为“navbar”的div？

我认为解决方法应该是：

#view#navbar {
font-style: normal;
...etc
}

但是那样做并不起作用。

有什么想法吗？

- marcamillion

Answer 1

在它们之间加一个空格：

#view #navbar {

如果您同时指定两个没有空格的属性，那么您选择的是具有这两个属性的元素 - 对于ID而言是不可能的，但对于类(class)来说则是可能的:

<div id="view" class="topmost">

div#view.topmost <-- Will address that element

- Pekka

---

谢谢。这完全正确。不过我更喜欢你回答的上半部分 :) - marcamillion

Answer 2

首先，如果文档中还有另一个#navbar，则应该将其更改为类而不是ID，您不应该使用相同名称的两个ID。

因此，代码应为：

<div id="view">
    <div class="navbar">
        Placeholder Text
    </div>

</div>

然后为了对其进行样式设置，您要做的是：

#view .navbar {
font-style: normal;
...etc
}

- Martin

---

嗯…问题在于，两者不能以相同的方式进行样式处理。因此，第二个导航栏看起来完全不同，并且与第一个也没有任何相似之处。但它仍然像导航栏一样起作用。这就是为什么需要有它存在的原因。 - marcamillion

@marcamillion：既然你想要两个导航栏，那么你需要将它改为一个类。 - Mike

@marcamillion：如果第二个导航栏不会与第一个共享任何样式，您只需为其使用不同的ID。或者只需使用相同的类名，并根据它们的父div ID进行区分，就像我提供的示例一样。 - Martin

Answer 3

#view #navbar {
    font-style: normal;
    ...etc
}

这就是你想要的。类也是如此。你可以在这里阅读有关CSS选择器的所有信息。

- Mike

Answer 4

作为一个id，它必须在文档中是唯一的。因此，你可以直接引用它：

#navbar {
  font-style: normal;
  ...etc
}

- Johan

Answer 5

ID是唯一的，所以你可以这样做：

#navbar {
  ...
}

但是，最好使用类来避免冲突：

<div class="view">
    <div class="navbar">
        Placeholder Text
    </div>
</div>

并执行;

.view .navbar {
  ...
}

- Dorian