css - 无法阻止 css 继承

Question

我总是无法阻止子菜单项继承顶级元素的颜色。我知道已经有人问过类似的问题，但很抱歉无法使用它们解决我的问题。 CSS:

.Topmenu a{
  color:black;}
.Topmenu.update a{
  color:blue;}
.Submenu a{
  color:black;}

现在菜单本身看起来像这样:

<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>

现在子菜单链接仍然是蓝色的。我做错了什么？

编辑:抱歉造成混淆，这是一个 2D 菜单，主菜单(顶级菜单项)是水平的，垂直的是顶级菜单(子菜单项)。

Answer 1

是因为specificity . .Submenu 类被 .Topmenu.update 覆盖。为避免这种情况，请将 .Topmenu.update 放在 .Submenu 类的前面。

.Topmenu a {
  color: black;
}

.Topmenu.update a {
  color: blue;
}

.Topmenu.update .Submenu a {
  color: black;
}

<div id='Mainmenu'>
  <ul>
    <li class='Topmenu update'><a href='Link1'>Link1</a>
      <ul>
        <li class='Submenu'><a href='Link2'>Link2</a></li>
      </ul>
    </li>
  </ul>
</div>