如何为WordPress中book-table类单个菜单项自定义:active链接颜色？

开发者阿泽

2026-5-15

嘿，我来帮你排查并解决这个问题！从你给出的代码来看，主要问题出在选择器层级错误以及样式优先级覆盖上，咱们一步步来调整：

1. 修正当前页面菜单项的样式选择器

你写的 .book-table > li > li.current-menu-item > a 选择器逻辑有问题——常规导航菜单的DOM结构里，current-menu-item 类是直接加在对应菜单项的 <li> 标签上的，而不是嵌套在两层 <li> 里面。假设你的DOM结构是类似这样：

<li class="book-table current-menu-item">
  <a href="book-table.html">预订餐桌</a>
</li>

那正确的选择器应该改成：

/* 覆盖当前页面菜单项的文字颜色 */
.book-table.current-menu-item > a {
  color: #ffffff !important;
}

这里加 !important 是为了确保它能覆盖主题默认的当前菜单项样式，如果你的主题样式优先级不高，也可以去掉试试，但加上更稳妥。

2. 确保:active状态的样式生效

你已经写了 .book-table a:active 的样式，但如果默认主题的 current-menu-item a:active 样式优先级更高，就会被覆盖。所以咱们需要单独指定当前页面菜单项的:active状态：

/* 普通状态下的:active样式 */
.book-table a:hover, 
.book-table a:focus, 
.book-table a:active {
  color: #222222 !important;
}

/* 当前页面菜单项的:active样式（如果需要和普通状态区分的话） */
.book-table.current-menu-item a:active {
  color: #ffffff !important; /* 这里改成你想要的颜色即可 */
}