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