Question

我在Tritter Bootstrap NavBar中有一排按钮，我想对一些但不是全部应用一些特殊的样式。我有一个来自BootSnip的课程，但我可以尝试使用选择器，但我不能将其应用于我想要的那些课程。如果我将它应用于UL，它可以正常工作，但显然这适用于所有这些。

你可以看到我在第三场比赛中获得了ds-btn课程

我已尝试将CSS的顶行更改为 ul.ds-BTN ul.ds-btn li ds-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 ...

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

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;
   }

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

2 个答案: