当前菜单项样式在wordpress

Question

我在这里工作的一个网站:http://www.estiponagroup.com/dev/

我希望当前菜单项在主导航是白色而不是灰色。在这种情况下，如果您在主页上，导航中的主页链接将是白色的。

无论我怎么做，它都是灰色的。

    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a,
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a {
      color: #ccc;
      text-transform: uppercase;
    }
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a:hover,
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover {
      color: #ccc;
      text-transform: uppercase;
      text-decoration: underline;
    }
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a,
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a {
      color: #fff;
    }

<div class="standard-menu-container  menu-skin-main reveal-from-top">
  <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg">
    <span class="ham"></span>
  </a>
  <nav>
    <ul class="menu" id="menu-main-nav-1">
      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://www.estiponagroup.com/dev/">Home</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a>
      </li>
      <!-- Other Nav links -->
    </ul>
  </nav>
</div>
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a { color: #ccc; text-transform: uppercase; } .main-header.menu-type-standard-menu
.standard-menu-container.menu-skin-main div.menu > ul > li > a:hover, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover { color: #ccc; text-transform: uppercase; text-decoration:underline; } .main-header.menu-type-standard-menu
.standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a { color: #fff; }
<div class="standard-menu-container  menu-skin-main reveal-from-top">
  <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg">
    <span class="ham"></span>
  </a>
  <nav>
    <ul class="menu" id="menu-main-nav-1">
      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://www.estiponagroup.com/dev/">Home</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a>
      </li>
      <!-- Other Nav links -->
    </ul>
  </nav>
</div>

Answer 1

li.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item.page-item-631.current_page_item.menu-item-645 a{
   background-color: red;
   color: white;
}

问题是css特异性，如果你检查谷歌浏览器有很多标识符，所以你需要建立点，或者作为最后的选择，使用!important