删除List的边界半径而不覆盖全局(Bootstrap 3)

Question

我正在使用Bootstrap 3来创建一个小应用程序.我需要使用他们的链接列表但不想要圆角边框.

从CSS文件中,他们使用以下内容:

.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

目前,我使用以下方法覆盖类:

.list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

这个问题是,这使我所有列表都没有边框.有没有办法覆盖我使用它的这个单一实例？

这是一个关于如何使用它的bootstrap示例(http://getbootstrap.com/components/#list-group-linked):

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Answer 1

你可以为你添加一个特殊的类名list-group,如list-special？然后使用......

CSS

.list-special .list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-special .list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

HTML

<div class="list-group list-special">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

演示:http://bootply.com/95585

编辑:使用CSS通常不是一个好习惯!重要.由于list-special提供了更多的特异性,你可以删除!important.我更新了Bootply,以便您可以看到它是如何工作的.

Answer 2

只需在包含div中添加一个额外的类.

<div class="list-group special">
    <a href="#" class="list-group-item active">
        Cras justo odio
    </a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

然后通过css定位它:

.special .list-group-item:first-child {
   border-top-right-radius: 0px !important;
   border-top-left-radius: 0px !important;
}

.special .list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

编辑:根据要求提供bootply链接:bootply