css - 使用CSS改变不同页面的菜单颜色

Question

我想更改菜单的文本颜色，使其在其他页面上有所不同。我使用以下 CSS 更改菜单的文本颜色、悬停颜色和当前菜单项颜色。它们可以独立工作，但当在同一个 CSS 脚本上运行时，它们就不能工作了。什么是 CSS 代码来完成这两件事而不做另一件事？

//改变菜单的文字颜色

.page-id-11 .sf-menu > li > a, .page-id-11 .sf-vertical > li > a {
    color: grey;
}

//改变悬停颜色和当前菜单项颜色

.page-id-11 .sf-menu > li > a:hover, .page-id-11 .sf-menu > li.current-
menu-item > a, .page-id-11  .sf-menu > li.current-menu-ancestor > a, 
.page-id-11 .sf-vertical > li > a:hover, .sf-vertical > li.current-
menu-item > a, .page-id-11 .sf-vertical > li.current-menu-ancestor > a 
{
    color: red;
}

Answer 1

.page-id-11 .sf-menu > ul > li > a:hover{
    color: red;
}

.page-id-11 .sf-menu > ul > li > a, .page-id-11 .sf-vertical > li > a {
    color: grey;
}

<div class="page-id-11">
  <div class="sf-menu">
    <ul>
      <li>
        <a>Link</a>
      </li>
    </ul>
  </div>
</div>

我只是假设您的代码有 <ul> <li>周围正如它应该。如果这样做，>选择器无法识别 <li>标签，因为它们“隐藏”在 <ul> 中(> 正在寻找直接在容器内的元素，而不是进一步嵌套。检查 this 以供引用。)

如果你输入 ul进入 CSS 样式，它们就起作用了。