html - 如何将一组广泛的样式应用(或编辑)到一个类/ID？

Question

我知道 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>

和以下示例 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 规则前添加前缀/后缀，但虽然它适用于某些规则，但它似乎会破坏其他规则，我不明白为什么。

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

Answer 1

不要根据 ul 选择元素，因为这会影响所有 ul 元素。根据唯一的 ID #drop-nav 选择它们。

尝试:

<style>
  #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>