如何修改WordPress OceanWP主题垂直菜单项的padding、margin等CSS属性

架构老林

2026-9-24

问题原因

你的CSS存在语法错误：原代码中padding: 2px 20px 2px 20px; !important;的!important前多写了分号，浏览器会直接忽略这条规则，正确写法是将!important放在属性值和结尾分号之间。
选择器优先级不足：OceanWP主题自带的导航样式规则权重更高，你写的单类选择器无法覆盖默认样式。
样式添加位置优先级不够：如果CSS没有加到WordPress官方的「额外CSS」区域，很可能被后加载的主题默认样式覆盖。

正确操作步骤

进入WordPress后台，打开「外观」→「自定义」→「额外CSS」面板，这是WordPress预留的最高优先级自定义CSS入口，后加载的样式会优先覆盖之前的规则。
粘贴修改后的CSS代码，需要给原有选择器加上OceanWP导航的父级容器选择器#site-header .main-navigation提升权重：

/* 调整指定菜单项497的链接样式 */
#site-header .main-navigation .menu-item-497 a {
    height: 40px !important;
    padding: 2px 20px !important;
    line-height: 135% !important;
}
/* 调整指定菜单项498的内边距 */
#site-header .main-navigation li.menu-item-498 {
    padding: 2px 20px !important;
}
/* 如果需要调整整个导航栏的总高度和边距，加上以下规则 */
#site-header .main-navigation {
    min-height: 40px !important;
    margin: 0 !important; /* 按需修改上下左右外边距 */
    padding: 0 !important; /* 按需修改上下左右内边距 */
}