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-Stylings中，它们就会起作用。

使用CSS更改不同页面上的菜单颜色

1 个答案: