Avada搭配Advanced Sidebar Widget时侧边栏菜单字体无法修改求助

问题背景 #

使用Avada主题和Advanced Sidebar Widget插件，无法修改侧边栏菜单内的字体样式。已尝试通过WP定制器调整字体、添加自定义CSS，均未解决问题，侧边栏除标题外字体显示异常。

用户提供的自定义CSS代码：

/*===== PAGE MENU ===== */

.ubermenu-target:hover{

    color: #0bbcd4 !important;
    background: white;
    padding: 0;
    border-radius: 4px;
}

.menu-pages {
position: fixed;
    right: 0px;
    top: 60%;
    z-index: 99999;
}
#menu-pages {
    
}
#menu-pages > li {
    list-style: none;
    margin: 5px 0 5px 5px;
    padding: 15px 10px 4px 7px;
    background: #903E97;
    border-radius: 1px;
    position: relative;
    border-radius: 4px 0px 0px 4px;
}
#menu-pages > li a {
    color: yellow;
}
/*#menu-pages span {
font-size: 0px;
}*/
#menu-pages ul {
    position: absolute;
    top: 0px;
    right: -95px;
    background: #903E97;
    list-style: none;
    padding-bottom: 3px;
     vertical-align: middle;
    opacity: 0;
    line-height: 39px;
}
#menu-pages ul a {
    color: white;
}
#menu-pages > li:hover ul {
 opacity: 1;
 /*padding-left: 5px;*/
 padding-right: 5px;
}

#menu-pages > li:hover {
  right: 95px;
  transition: 1s;
}
#menu-pages ul a {
    vertical-align: middle;
}
.menu-item i._mi {
    line-height: 1.3;
}


.menu-pages {
position: fixed;
    right: 0px;
    top: 60%;
    z-index: 99999;
}
#menu-pages-one {

}
#menu-pages-one > li {
    list-style: none;
    margin: 5px 0 5px 5px;
    padding: 15px 10px 4px 7px;
    background: #903E97;
    border-radius: 1px;
    position: relative;
    border-radius: 4px 0px 0px 4px;
}
#menu-pages-one > li a {
    color: white;
}


home-post-slider {
    background: rgba(0,0,0,0);
}
home-posts-column {
    background: rgba(0,0,0,.7);
}
home-posts-posts .fusion-post-medium {
    margin-bottom: 10px;
}
home-posts-posts h2.entry-title {
    font-size: 40px !important;
    line-height: 1.25 !important;
}
/*.rev_slider .tp-caption, .rev_slider .caption {
    line-height: 1.25 !important;
}*/
home-posts-posts p {
    color: #fff;
}

.avada-skin-rev {
    border-top: 0px solid #d2d3d4 !important;
    border-bottom: 0px solid #d2d3d4 !important;
}


.slidethumb {
    width: 30%;
    float: left;
    height: 190px;
    margin-right: 2% !important;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    display: table;
    position: relative;
}
img.top-slider-featured-image {
    width: 100% !important;
    height: auto !important;
}
.slidetext {
    width: 60%;
    float: left;
    height: 100%;
}
p.slide-excerpt {
    line-height: 1.25 !important;
}

@media only screen and (max-width: 1024px) {
.slidethumb {
    width: 44%;
    float: none;
    /* height: 200px; */
    margin-bottom: 2% !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: table;
}
img.top-slider-featured-image {
    width: 100% !important;
    height: auto !important;
}
.slidetext {
    width: 44%;
    float: none;
    height: 100%;
}
    
}


@media only screen and (min-width: 800px) {
.home .forcefullwidth_wrapper_tp_banner {
  margin-bottom: -26% !important;
} 
}



/*  ACCENTS & COLORS 
______________________________________________________________________________ */

#content::before {
  background: #903E97 none repeat scroll 0 0 !important;
  content: "";
}

/* ===== SEARCH ICON ===== */

/* ----- icon hover color ----- */
.fusion-main-menu .fusion-main-menu-search:hover a:after {
/* CHANGE */    color: #FFF;
}

/* ----- icon BG color ----- */
.fusion-main-menu > ul > li:last-child {
/* CHANGE */    background-color: #F0F5F6;
}


/* ===== JOBS ===== */

.jbp_job_except {
  border-top: 4px solid #903E97 !important;
}


/* ===== RIGHT MENU ===== */
#menu-right-menu > li {
    background: #903E97;
}
#menu-right-menu > li i {
    color: #FFF;
}
#menu-right-menu ul {
    background: #903E97;
}
#menu-right-menu ul a {
    color: #FFF;
}


/* ========= TITLE "MENU" STYLES ======= */
.advanced-sidebar-menu .heading, .widget_nav_menu .heading {
  border: 1px solid #903E97;
 
}
.advanced-sidebar-menu .heading h4, .widget_nav_menu .heading h4 {
  color: #903E97 !important;
}

.advanced-sidebar-menu .heading h4::before, .widget_nav_menu .heading h4::before {
  color:#903E97;
}


/* ========= SIDEBAR LINK & TEXT STYLES ======= */
.parent-sidebar-menu a,.sidebar .menu a {
  color: #903E97 !important;
}
.parent-sidebar-menu .current_page_item > a {
color:#903E97 !important;
}
.parent-sidebar-menu li > a:hover, .sidebar .menu a:hover  {
color:#000 !important;
}

解决方案 #

1. 优化CSS选择器优先级 #

现有CSS选择器未覆盖插件生成的菜单元素样式，使用更精准的选择器针对侧边栏菜单设置字体属性：

/* 侧边栏菜单基础字体样式 */
.advanced-sidebar-menu ul li a,
.advanced-sidebar-menu ul li .advanced-sidebar-menu-item-title {
    font-family: "微软雅黑", sans-serif !important; /* 替换为目标字体 */
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* 当前激活菜单项样式 */
.advanced-sidebar-menu .current-menu-item > a,
.advanced-sidebar-menu .current_page_item > a {
    color: #903E97 !important;
    font-weight: 600 !important;
}

/* 菜单hover效果 */
.advanced-sidebar-menu ul li a:hover {
    color: #0bbcd4 !important;
}

2. 检查插件内置设置 #

进入WordPress后台的Advanced Sidebar Widget设置页面，查看是否有「字体样式」「菜单样式」相关配置选项，部分插件自带样式调整功能，无需手动编写CSS。

3. 清除缓存 #

修改CSS后，依次清除：

• WordPress缓存插件的缓存（如WP Rocket、W3 Total Cache）
• 浏览器缓存（快捷键：Ctrl+Shift+R / Cmd+Shift+R）
  确保新样式文件被加载。

内容的提问来源于stack exchange，提问作者user21399252