将样式应用于引导程序导航栏中的某些按钮

Question

我在Tritter Bootstrap NavBar中有一排按钮，我想对一些按钮应用一些特殊的样式，但不是全部。我有一个来自BootSnip的类，但尽管我尝试了选择器，但我无法将其应用于我想要的li。如果我把它应用到UL，效果很好，但显然这适用于所有人。

你可以看到我在的第三层有课

我尝试将CSS的顶行更改为ul.ds-btnul.ds-btn lids btn li

但无济于事。我可能错过了一些非常简单的东西。

任何帮助都将受到热烈欢迎。

谢谢。

HTML

<ul class="navbar-right">
        <li class="people-button"><a href=@Url.Action("Index", "People")><i class="fa fa-check-square-o fa-2x"></i><br />People</a></li>
        <li class="books-button"><a href=@Url.Action("Index", "Books")><i class="fa fa-flag fa-2x"></i><br />Books</a></li>    
        <li class="review-button ds-btn">
            <a class="btn btn-lg" href="http://dotstrap.com/">
                <i class="fa fa-bullseye fa-2x"></i><span>User<br>Profile</span>
            </a>
        </li>
    </ul>

CSS

.ds-btn li { list-style:none; float:left; padding:10px; }
.ds-btn li a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
.ds-btn li a span small{width:100%; display:inline-block; text-align:left;

Answer 1

您的选择器顺序错误，需要使用：

li.ds-btn。。。

这是因为您的li上有类ds-btn，您当前的选择器.ds-btn li基本上是在中查找所有li任何具有类ds-btn的元素，这些元素都不存在于您的代码中。li.ds-btn基本上是指查找任何具有类ds-btn 的li

li.ds-btn { list-style:none; float:left; padding:10px; }
li.ds-btn a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
li.ds-btn a span small{width:100%; display:inline-block; text-align:left;

Answer 2

我认为你应该写一些类似的css

   li.ds-btn { 
          list-style:none; 
          float:left; 
          padding:10px; 
   }
   li.ds-btn a span{
          padding-left:15px;
          padding-right:5px;
          width:100%;
          display:inline-block; 
          text-align:left;
   }
   li.ds-btn a span small{
          width:100%; 
          display:inline-block; 
          text-align:left;
   }