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>

Answer 2

请尝试在所有#drop-nav规则之前添加li，然后将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>

如何将一组广泛的样式应用（或编辑）到一个类/ ID？

2 个答案: