Html 删除列表的边界半径而不全局覆盖（引导3）

我正在使用Bootstrap3创建一个小应用程序。我需要使用它们的边界，但不希望使用圆形边界

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

目前，我使用以下命令覆盖这些类：

.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中关于如何使用此（）的示例：

---

您能为

列表组添加一个特殊的类名吗

，例如

列表特殊

？然后使用

CSS

HTML

演示：

---

编辑：使用CSS通常不是好的做法！重要的。由于

特殊列表

提供了更多的特殊性，因此您可以删除

！重要信息

。我更新了引导层，以便您可以看到它是如何工作的。

只需向包含的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>

编辑：

---

根据启动链接的请求：

它的简单之处是创建一个父类并将其指向子类，它将使用其中的指定元素对父类进行重写，如

.parent>。列表组项{color:blue；}

快速提示：这将继续使用bootstrap 4（alpha），只需将

包装在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>

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

.list-pers .list-group-item{border-radius: 0px !important;}