不能样式自定义菜单

Question

我有一个由代码生成的Wordpress菜单在我的网站上：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-primary' ) ); ?>

当我将名为“类别”的菜单分配到“主菜单”位置时，这将生成以下的前端代码：

<ul id="menu-categories" class="nav-primary">
    <li id="menu-item-910" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-910">
        <a href="http://steven.doig.com.au/category/environmental/">Environmental</a></li>
</ul>

未应用下列CSS：

.nav-primary {
    display: block;
}
.nav-primary ul {
    list-style-type: none !important;
    background-color: rgba(0,0,0,0.25) !important;
    padding: 5px !important;
    border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
}
.nav-primary ul li {
    display: inline-block !important;
    background-color: rgba(0,0,0,0.25) !important;
    margin-right: 5px !important;
    height: 32px !important;
    padding-top: 8px !important;
    border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
}
.nav-primary ul li a {
    text-decoration: none !important;
    color: #fff !important;
    margin: 8px 14px 0 14px !important;
}

当前端输出的ID是从外观>菜单中的菜单名称生成时，我如何设置此菜单的样式？

如果我向公众部署这个主题，我将永远无法预测菜单的名称，并且生成的ID将始终优先于类。

Answer 1

我认为你的目标不是正确的。试试这个：

    #mainmenu {
        display: block;
    }
    #mainmenu ul.nav-primary {
        list-style-type: none !important;
        background-color: rgba(0,0,0,0.25) !important;
        padding: 5px !important;
        border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    #mainmenu ul.nav-primary li {
        display: inline-block !important;
        background-color: rgba(0,0,0,0.25) !important;
        margin-right: 5px !important;
        height: 32px !important;
        padding-top: 8px !important;
        border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    #mainmenu ul.nav-primary li a {
        text-decoration: none !important;
        color: #fff !important;
        margin: 8px 14px 0 14px !important;
    }

尝试替换上面提到的代码，或者将其添加到文件↓的底部

http://steven.doig.com.au/wp-content/themes/transparent/style.css