Question

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

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

这样的造型就像是等等：

/* 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> ...

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

有人有什么想法吗？

Answer 1

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

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

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

CSS类失败，其中id正在工作

1 个答案: