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>

现在子菜单Link仍为蓝色。我做错了什么？

编辑：很抱歉这是一个混乱，它是一个2D菜单，主菜单（Topmenu项目）是水平的垂直Topmenu（子菜单项）。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题来自你的CSS。它看起来应该是这样的;

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

注意第二个块在第一个类之后有一个逗号和空格。

尽管您的HTML确实有错误，但它仍然不会影响CSS的正常工作。是的，你必须修复你的HTML看起来不正确。所以修复@ zowie的修正。

让我知道。

Answer 3

使用＆gt; 作为第一级：

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

无法阻止css继承

3 个答案: