Css 引导导航栏JSF<；h:commandLink>；样式设置不起作用

我使用的是引导中的导航栏主题。导航栏使用

引导程序的样式不起作用的问题在于引导程序使用以下选择器，例如

我不明白第二种解决方案是什么？我用一个h:form包装了我的导航栏，但是现在没有任何东西会被样式化了？啊，我的错，我在css导入方面遇到了问题，现在一切都正常了，谢谢你的帮助：）

        <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/WebEng_P07/faces/Home.xhtml">Home</a></li>
                    <li><a href="/WebEng_P07/faces/Posts.xhtml">Posts</a></li>
                    <li><a href="/WebEng_P07/faces/Login.xhtml">Login</a></li>
                    <li><a href="/WebEng_P07/faces/Register.xhtml">Registrierung</a></li>
                    <li> 
                        <h:form![enter image description here][1]>
                            <h:commandLink value="Logout" action="#{loginBean.logout}" rendered="#{loginBean.loggedIn}"></h:commandLink>
                        </h:form> 
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

.navbar-default .navbar-nav>li>a {
    color: #777;
    /* other styles */
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>form>a, {
    color: #777;
   /* other styles */
}

       <!-- Fixed navbar -->
<h:form>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/WebEng_P07/faces/Home.xhtml">Home</a></li>
                    <li><a href="/WebEng_P07/faces/Posts.xhtml">Posts</a></li>
                    <li><a href="/WebEng_P07/faces/Login.xhtml">Login</a></li>
                    <li><a href="/WebEng_P07/faces/Register.xhtml">Registrierung</a></li>
                    <li> 
                        <h:commandLink value="Logout" action="#{loginBean.logout}"   rendered="#   {loginBean.loggedIn}">
                        </h:commandLink>    
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</h:form>