1

我有一个具有默认样式的导航菜单...

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a class="MenuBarItemSubmenu" href="membership.php">Membership</a>
   <ul>
    <li><a href="#">General</a></li>
    <li>
     <a class="MenuBarItemSubmenu" href="#">Adult</a>
     <ul>
      <li><a href="#">Beginner</a></li>
      <li><a href="#">Intermediate</a></li>
      <li><a href="#">Advanced</a></li>
     </ul>                    
    </li>
   [...]
</nav>

有这样的样式，比如blah：

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
 display: block;
 cursor: pointer;
 background-color: #000;
 padding: 0.5em 0.75em;
 color: #FFF;
 text-decoration: none;
}
/* Menu items that have mouse over or focus have an off-white background and dark text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
 background-color: #EEE;
 color: #333;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with an off-white background and dark text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
 background-color: #EEE;
 color: #333;
} /* And so on... */

但是我想要子菜单和突出显示的项目有所不同。这个问题并不是专门针对这个的，因为我有一个解决方案，如果不是最优雅的，也是有意义的，那就是构建一个完全不同的选择器：

#topitem:hover, #topitem:focus {
 background-color: #FFF;
 color: #000;
}

#subitem:hover, #subitem:focus{
 background-color: #FFF;
 color: #000;
}

然后有相应的HTML

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#" id="topitem">Home</a></li>
  <li><a class="MenuBarItemSubmenu" id="topitem" href="membership.php">Membership</a>
 <ul> ...

这很好用..但是呃......任何id的实例都不应该超过一个。所以我说，K，让我们将这些作为类：

CSS

.topitem:hover, .topitem:focus {
 background-color: #FFF;
 color: #000;
}

.subitem:hover, .subitem:focus {
 background-color: #FFF;
 color: #000;
}

HTML

 <nav>  
  <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="#" class="topitem">Home</a></li>
   <li><a class="MenuBarItemSubmenu topitem" href="membership.php">Membership</a>
    <ul> ...

但令我惊讶的是，这根本不起作用......

有人有什么想法吗？

4

1 回答 1

1

ID 版本之所以有效，是因为 ID 的 CSS 规则总是胜过类的规则。

然后，类样式还取决于在样式表中声明规则的时间。

如果在声明默认样式之前声明子<li>项样式，则默认样式将胜出。将所需的样式规则移到默认样式下方，这应该可以解决您的问题。

于 2012-10-31T15:30:19.573 回答