Html 如何仅为多个无序列表中的一个设置样式？

我有一个无序列表，用于导航。然后，我在主页上使用另一个无序列表，列出了用于我摄影的设备列表

当我只设置顶部导航的样式时，它开始设置设备的

ul

和

li

。下面的代码（尚未完成，但我正在创建水平菜单）：

HTML

导航：

<nav id="page-navigation">
      <ul>
            <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
                <ul>
                    <li><a href="_portfolio/photography.html" title="Photography">Photography</a></li>
                </ul>
      </ul>
</nav>

#page-navigation ul, li
{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

设备：

<h1>Equipment:</h1>
  <ul id="equipment">
      <li>Canon EOS 600D.</li>
      <li>Canon EF 100mm f/2.8 Macro USM Lens.</li>
      <li>Canon EF-S 18-55mm f/3.5-5.6 Lens.</li>
      <li>Adobe Lightroom CC.</li>
  </ul>

#equipment li, ul
{
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 0.1em;
    margin-bottom: 0.5em;
}

无论我在导航中采用什么风格，它都会进入设备，反之亦然。我认为拥有一个id的想法意味着它只会设计该id，而不是它找到的每个

li

或

ul

。

这：

#页面导航ul，li{}

应理解为：

#页面导航，
李{
}

您要求在

#页面导航

下设置任何

ul

，并在页面上设置任何

li

如果您想将自己限制在

#页面导航

下的

li

标记，您应该说：

#页面导航，
#页面导航li{
}

如果您只希望对每个项目的顶层设置样式，请这样说：

#页面导航>ul，
#页面导航>ul>li{
}

您需要了解逗号在选择器中的作用。它分隔了要选择的元素，因此

#页面导航ul，li

意味着将以下规则应用于任何

ul

元素，该元素是ID为

#页面导航

的元素的描述，并且还将其应用于页面上的所有

li

元素

您的

#设备li、ul

选择器也是如此。也就是说，将以下规则应用于ID为

#equipment

的元素的后代的所有

li

元素以及页面上的所有

ul

元素

---

您可能需要的是

#页面导航ul li

和

#设备li

我现在在移动设备上，但您的选择器错了。”#页面导航ul，li'选择页面导航->ul和每个li标记。只要去掉逗号就可以了

如果要设置列表中第一个li的样式，请编写：

#page-navigation > li {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}

对于第二个李：

#page-navigation li > li {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}

要设置ul的样式，请执行以下操作：

#page-navigation ul {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}