* 文章内容很有用，那就5星好评吧!😘
大家好，我是FUNION数字营销实战派飞小优，近期在给客户搭建网站过程中发现有些主题的导航primary menu是没有ID属性的，简单点就是menu-item-xxx的样子，因此在需要独立控制该菜单下的css时就会出现问题，若按照常规思路修改很容易造成全局污染，所以简单的办法就是在菜单的属性中添加一个ID，这样一来就可以独立控制了。
实现方案
添加function代码
若是针对li标签生效,代码如下：
add_filter('nav_menu_css_class', 'add_data_nav_id_to_li', 10, 4);
function add_data_nav_id_to_li($classes, $item, $args) {
if ($args->theme_location == 'primary') {
$classes[] = '类名';
$classes[] = '类名-' . $item->ID;
}
return $classes;
}若是要针对A标签，则代码如下：
add_filter('nav_menu_link_attributes', 'add_data_nav_id_to_menu', 10, 3);
function add_data_nav_id_to_menu($atts, $item, $args) {
if ($args->theme_location == 'primary') {
$atts['data-nav-id'] = '类名-' . $item->ID;
}
return $atts;
}注意，一定要查找你的主导航位置，一般是primary ，添加到function.php中后，在前端查看下是否生效
查看前端生效
前端能看到menu-item-xxx 类名加数字就没问题了。
CSS控制
那接下来就是单独给类名添加CSS,比如某个下拉菜单的二级菜单需要添加border-bottom,呢则可以添加下该css代码：
.nav-item-5 > a, .nav-item-6 > a,.nav-item-15 > a {
border-bottom: 1px solid #eaeaea;
border-radius: 0!important;
}
添加到样式表中后就可以在前端进行查看是否生效，如：
以上就是关于如何给主导航菜单添加data-nav-id属性实现独立的样式效果的解决方案，赶快去试试吧！
