快速入门CSS，如何“作用域”样式？

Question

抱歉措辞不够清晰，虽然我知道这是可能的，但我无法找到正确的搜索关键词，所以我将用以下方式进行解释。

我有这个HTML代码：

<div class="navbar_links">
<ul>
<li><a href="www.google.com">Home</a></li>
<li><a href="www.google.com">About</a></li>
<li><a href="www.google.com">Speakers</a></li>
<li><a href="www.google.com">Exhibitors</a></li>
<li><a href="www.google.com">Agenda</a></li>
<li><a href="www.google.com">Location</a></li>
</ul>
</div>

然后稍后我可能会有另一个列表。。

我想要做的就是为navbar_links类的<ul> / <li>项目设置样式。不是针对html中任何无序列表的出现，而只是在<div class="navbar_links">中找到的无序列表。请问有人能向我解释如何做到这一点吗？并告诉我它的“名称”，以便将来参考，这样我就不必浪费SO的时间了，因为我知道我应该可以通过谷歌找到答案，抱歉: P

- Holly

---

除非你有特定原因，否则不需要将 <ul> 包裹在 <div> 中，所以它可以变为 <ul class="navbar_links">。 - Ryan B

可能是重复的问题：有没有办法将CSS限制为仅适用于内容区域而不是整个页面？ - user229044

Answer 1

使用.navbar_links ul或.navbar_links li取决于你想要样式化的内容。这将限制样式仅适用于navbar_links类中的项目。

- matthewvb

Answer 2

你需要查找CSS选择器：www.w3.org/TR/CSS2/selector.html 在这种情况下，您可以编写以下内容：

.navbar_links ul {
  /* put styles for ul here */
}

- Andrew

---

被选为答案，因为你第一个告诉我选择器的名称以及如何使用它 :) 虽然感谢大家！ - Holly

Answer 3

像这样：

.navbar_links ul

这是一个示例fiddle：http://jsfiddle.net/AWWmc/1

- canon

Answer 4

您可以直接使用以下代码：

.navbar_links ul  

达到你想要的目标。

- peacemaker

Answer 5

你需要的是所谓的CSS选择器，或更具体地说，类选择器。例如:

.navbar_links ul, /* Select all ul within elements of class='navbar_links' */
.navbar_links ul > li /* Select all li that are *children* of a ul within els of class='navbar_links' */

第二个例子不会选择 <div class='navbar_links'><ul><li><ol><li>… 内部的 li。

- kojiro