WordPress Twenty Thirteen主题菜单项背景色不随CSS生效该如何解决？

数据老陈

2026-10-2

问题原因

核心错误是第一个hover样式的选择器书写错误：你写的nav-menu li a:hover漏了类选择器必需的.前缀，浏览器会将其识别为<nav-menu>标签选择器，完全匹配不到你的导航元素。而下划线相关的两个样式都正确使用了.nav-menu类选择器，所以动画能正常生效。
Twenty Thirteen主题自带的导航样式优先级更高，修复选择器后也存在被默认样式覆盖的可能。
代码存在冗余冲突：同一条规则里重复定义了display、color属性，后面的属性值会直接覆盖前面的设置，属于无效代码。

修复后的代码

/* 提升选择器优先级，避免被主题默认样式覆盖 */
.navbar .nav-menu li a:hover {
    background: pink !important; /* 优先级不够时可加!important强制生效 */
    color: orange;
    position: relative;
    display: block;
    text-decoration: none;
    font-family: "Lato";
    font-size: 2rem;
    text-transform: uppercase;
    padding: 4px 0;
    transition: 0.5s;
}

.nav-menu li a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    top: 100%;
    left: 0;
    background: red;
    transition: transform 0.5s;
    transform: scaleX(0);
    transform-origin: right;
}

.nav-menu a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}