html - 删除列表的边界半径而不覆盖全局(Bootstrap 3)

Question

我正在使用 Bootstrap 3 创建一个小型应用程序。我需要使用他们的 linked list但不想要圆形边框。

在 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，以便您了解其工作原理。