Html 如何仅对一个类/ID应用（或编辑）广泛的样式集？

我知道css的基本知识，以前从未遇到过任何问题。。。但是，我目前正在使用以下css处理css下拉列表的示例：

<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

ul{列表样式：无；填充：0px；边距：0px；}
ul li{显示：块；位置：相对；浮动：左；边框：1px实心#000}
li ul{显示：无；}
ulli{显示：块；背景：#000；填充：5px 10px 5px 10px；文本装饰：无；
空白：nowrap；颜色：#fff；}
ul li a:hover{背景：#f00；}
li:悬停ul{显示：块；位置：绝对；}
li：悬停li{float:none；}
李：将鼠标悬停在{背景：#f00；}
li:hover li a:hover{background:#000；}
#下拉导航li ul li{边框顶部：0px；}

以及以下示例html：

<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

它工作得很好，但是很明显css也会影响页面上的任何其他列表。我希望所有css只应用于#drop nav的子元素

我不确定实现这一目标的最佳方法是什么？我尝试过用ID作为css规则的前缀/后缀，但尽管它对某些规则有效，但似乎破坏了其他规则，我不明白为什么

---

理想情况下，我想要一个能教我如何更好地理解这个问题的答案。。。。我看不出我遗漏了什么。

不要根据

ul

选择元素，因为这会影响所有

ul

元素。根据唯一的id

#drop nav

选择它们

尝试：

#下拉导航{列表样式：无；填充：0px；边距：0px；}
#下拉导航li{显示：块；位置：相对；浮动：左；边框：1px实心#000}
#下拉导航ul{显示：无；}
#下拉导航li a{显示：块；背景：#000；填充：5px 10px 5px 10px；文本装饰：无；空白：nowrap；颜色：#fff；}
#降落导航李a:悬停{背景：#f00；}
#下拉导航li:悬停ul{显示：块；位置：绝对；}
#下降导航li:悬停li{float:无；}
#放下导航李：悬停在{背景：#f00；}
#放置导航li:hover li a:hover{background:#000；}
#下拉导航li ul li{边框顶部：0px；}

请尝试在所有

li

规则之前添加

#drop nav

，并首先将

ul

更改为

#drop nav

，如：

<style type="text/css">
  #drop-nav {list-style: none;padding: 0px;margin: 0px;}
  #drop-nav li {display: block;position: relative;float: left;border:1px solid #000}
  #drop-nav li ul {display: none;}
  #drop-nav li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;white-space: nowrap;color: #fff;}
  #drop-nav li a:hover {background: #f00;}
  #drop-nav li:hover ul {display: block; position: absolute;}
  #drop-nav li:hover li {float: none;}
  #drop-nav li:hover a {background: #f00;}
  #drop-nav li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

#下拉导航{列表样式：无；填充：0px；边距：0px；}
#下拉导航li{显示：块；位置：相对；浮动：左；边框：1px实心#000}
#下拉导航ul{显示：无；}
#下拉导航li a{显示：块；背景：#000；填充：5px 10px 5px 10px；文本装饰：无；空白：nowrap；颜色：#fff；}
#降落导航李a:悬停{背景：#f00；}
#下拉导航li:悬停ul{显示：块；位置：绝对；}
#下降导航li:悬停li{float:无；}
#放下导航李：悬停在{背景：#f00；}
#放置导航li:hover li a:hover{background:#000；}
#下拉导航li ul li{边框顶部：0px；}

我不得不将第一条规则改为：ul#drop nav，ul#drop nav li ul{列表样式：无；填充：0px；边距：0px；}但除此之外，您的答案非常有效，谢谢！我真的在寻找你是如何做到这一点的潜在逻辑。基本上，我将ID附加到规则中，除非规则应用到元素本身，在这种情况下，我需要选择ID而不是元素。。。。然后整理出我希望应用于元素和任何相同类型的子元素的规则。

<style type="text/css">
  #drop-nav {list-style: none;padding: 0px;margin: 0px;}
  #drop-nav li {display: block;position: relative;float: left;border:1px solid #000}
  #drop-nav li ul {display: none;}
  #drop-nav li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;white-space: nowrap;color: #fff;}
  #drop-nav li a:hover {background: #f00;}
  #drop-nav li:hover ul {display: block; position: absolute;}
  #drop-nav li:hover li {float: none;}
  #drop-nav li:hover a {background: #f00;}
  #drop-nav li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>